web-dev-qa-db-fra.com

Colspan toutes les colonnes

Comment puis-je spécifier une balise td doit couvrir toutes les colonnes (lorsque le nombre exact de colonnes du tableau sera variable/difficile à déterminer lors du rendu du code HTML)? w3schools mentionne que vous pouvez utiliser colspan="0", mais cela ne dit pas exactement quels navigateurs supportent cette valeur (IE 6 est dans notre liste à supporter).

Il semble que définir colspan sur une valeur supérieure à la quantité théorique de colonnes que vous pouvez avoir fonctionnera, mais cela ne fonctionnera pas si vous avez table-layout défini sur fixed. Y at-il des inconvénients à utiliser une disposition automatique avec un grand nombre pour colspan? Y a-t-il une manière plus correcte de faire cela?

htmlhtml-tabletablelayout
352
Bob

J'ai IE 7.0, Firefox 3.0 et Chrome 1.0

L'attribut colspan = "0" dans un TD est et NON sur tous les TD de des navigateurs ci-dessus .

Peut-être pas recommandé comme pratique de balisage appropriée, mais si vous donnez une valeur de colspan supérieure au total possible no. des colonnes dans les autres lignes , alors le TD s'étend sur toutes les colonnes.

Ceci ne fonctionne PAS lorsque la propriété CSS de présentation de table est définie sur fixed.

Encore une fois, ce n'est pas la solution parfaite mais semble fonctionner dans les 3 versions de navigateur mentionnées ci-dessus lorsque la propriété CSS de présentation de table est automatique . J'espère que cela t'aides.

248
Nahom Tijnam

Il suffit d'utiliser ceci:

colspan="100%"

Cela fonctionne sur Firefox 3.6, IE 7 et Opera 11! (et je suppose que sur d'autres, je ne pourrais pas essayer)

Attention: comme mentionné dans les commentaires ci-dessous, il s'agit en réalité de la même chose que colspan="100". Par conséquent, cette solution se cassera pour les tables avec css table-layout: fixed, ou plus de 100 colonnes.

254
Cluxter

Si vous souhaitez créer une cellule 'title' qui couvre toutes les colonnes, vous voudrez peut-être utiliser la balise caption comme en-tête pour votre table ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) Cet élément est destiné à cet usage. Il se comporte comme une div, mais ne couvre pas toute la largeur du parent de la table (comme le ferait une div dans la même position (n'essayez pas cela à la maison!)), Il couvre plutôt la largeur de la table. table. Il y a quelques problèmes de navigation entre les navigateurs avec des frontières et autres (c'était acceptable pour moi). Quoi qu'il en soit, vous pouvez lui donner l'apparence d'une cellule couvrant toutes les colonnes. À l'intérieur, vous pouvez créer des lignes en ajoutant des éléments div. Je ne sais pas si vous pouvez l'insérer entre les éléments tr, mais ce serait un bidouillage je suppose (donc non recommandé). Une autre option serait de déconner avec des divs flottants, mais c'est beurk!

Faire

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Ne pas

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>
63
Akira

Pour IE 6, vous souhaiterez que colspan corresponde au nombre de colonnes de votre tableau. Si vous avez 5 colonnes, alors vous voudrez: colspan="5".

La raison en est que IE gère les colspans différemment, il utilise la spécification HTML 3.2:

IE implémente la définition HTML 3.2, il définit colspan=0 comme colspan=1.

Le bogue est bien documenté .

14
George Stocker

En guise de réponse partielle, voici quelques remarques sur colspan="0", mentionnées dans la question.

tl; dr version:

colspan="0" ne fonctionne dans aucun navigateur. W3Schools est faux (comme d'habitude). HTML 4 disait que colspan="0" devrait faire en sorte qu'une colonne couvre tout le tableau, mais personne ne l'a mis en œuvre et a été retirée de la spécification après HTML 4.

Quelques détails et preuves supplémentaires:

  • Tous les principaux navigateurs le traitent comme équivalent à colspan="1".

    Voici une démo montrant ceci; essayez-le sur le navigateur de votre choix.

    td {
  border: 1px solid black;
}
    <table>
  <tr>
    <td>ay</td>
    <td>bee</td>
    <td>see</td>
  </tr>
  <tr>
    <td colspan="0">colspan="0"</td>
  </tr>
  <tr>
    <td colspan="1">colspan="1"</td>
  </tr>
  <tr>
    <td colspan="3">colspan="3"</td>
  </tr>
  <tr>
    <td colspan="1000">colspan="1000"</td>
  </tr>
</table>

  • La spécification HTML 4 (maintenant ancienne et obsolète, mais à l'époque où cette question a été posée) a effectivement dit que colspan="0" doit être traité comme couvrant toutes les colonnes:

    La valeur zéro ("0") signifie que la cellule couvre toutes les colonnes de la colonne actuelle à la dernière colonne du groupe de colonnes (COLGROUP) dans laquelle la cellule est définie.

    Cependant, la plupart des navigateurs n'ont jamais implémenté cela.

  • HTML 5.0 (recommandation formulée en 2012), le standard de vie WhatWG HTML (le standard dominant aujourd'hui) et la dernière spécification W3 HTML 5 ne contiennent pas le libellé du HTML 4 ci-dessus et conviennent à l'unanimité qu'un colspan sur 0 n'est pas autorisé, avec cette formulation qui apparaît dans les trois spécifications:

    Les éléments td et th peuvent avoir un attribut colspan content spécifié, dont la valeur doit être un entier non négatif valide supérieur à zéro ...

    Sources:

  • Les revendications suivantes provenant de la page W3Schools associée à la question sont, du moins de nos jours, complètement fausses:

    Seul Firefox supporte colspan = "0", ce qui a une signification particulière ... [Il] indique au navigateur d'étendre la cellule à la dernière colonne du groupe de colonnes (colgroup)

    et

    Différences entre HTML 4.01 et HTML5

    AUCUN.

    Si vous n'êtes pas déjà au courant que W3Schools est généralement considéré par les développeurs Web au mépris de ses inexactitudes fréquentes, pensez-y, pourquoi.

11
Mark Amery

Si vous utilisez jQuery (ou ne vous dérange pas de l'ajouter), le travail sera mieux fait que n'importe lequel de ces hacks.

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { maxCol = colCount };
    });

    return maxCol;

}

Pour faciliter la mise en œuvre, je décore tout td/th dont j'ai besoin ajusté avec une classe telle que "maxCol", puis je peux faire ce qui suit:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

Si vous trouvez une implémentation pour laquelle cela ne fonctionnera pas, ne claquez pas la réponse, expliquez-la dans les commentaires et je mettrai à jour si elle peut être couverte.

11
rainabba

Une autre solution pratique mais laide: colspan="100", où 100 est une valeur supérieure au nombre total de colonnes dont vous avez besoin pour colspan.

Selon le W3C, l'option colspan="0" n'est valide qu'avec la balise COLGROUP.

4
Raptor

Vous trouverez ci-dessous une solution es6 concise (similaire à réponse de Rainbabba mais sans le jQuery).

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});
html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}
<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>
2
Sjeiti