Colspan toutes les colonnes

Comment puis-je spécifier qu'une tdbalise doit couvrir toutes les colonnes (lorsque le nombre exact de colonnes dans le tableau sera variable / difficile à déterminer quand le HTML est rendu)? w3schools mentionne que vous pouvez utiliser colspan="0", mais il ne dit pas exactement quels navigateurs prennent en charge cette valeur (IE 6 est dans notre liste à prendre en charge).

Il semble que la définition colspand'une valeur supérieure à la quantité théorique de colonnes que vous pourriez avoir fonctionnera, mais elle ne fonctionnera pas si vous l'avez table-layoutdéfinie sur fixed. Y a-t-il des inconvénients à utiliser une mise en page automatique avec un grand nombre pour colspan? Existe-t-il une manière plus correcte de procéder?

J'ai IE 7.0, Firefox 3.0 et Chrome 1.0

L'attribut colspan = "0" dans un TD ne couvre PAS tous les TD dans l' un des navigateurs ci-dessus .

Peut-être pas recommandé comme bonne pratique de balisage, mais si vous donnez une valeur de colspan supérieure au total possible, non. de colonnes dans d'autres rangées , alors le TD couvrirait toutes les colonnes.

Cela ne fonctionne PAS lorsque la propriété CSS de mise en page 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 mise en page est automatique . J'espère que cela t'aides.

Utilisez simplement ceci:

colspan="100%"

Cela fonctionne sur Firefox 3.6, IE 7 et Opera 11! (et je suppose que sur les autres, je n'ai pas pu essayer)

Attention: comme mentionné dans les commentaires ci-dessous, c'est en fait la même chose que colspan="100". Par conséquent, cette solution se cassera pour les tables avec css table-layout: fixedou plus de 100 colonnes.

Si vous souhaitez créer une cellule «titre» qui couvre toutes les colonnes, comme en-tête de votre tableau, vous pouvez utiliser la balise de légende ( 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 effet. Il se comporte comme un div, mais ne couvre pas toute la largeur du parent de la table (comme un div le ferait dans la même position (n'essayez pas cela à la maison!)), Au lieu de cela, il s'étend sur la largeur du table. Il y a des problèmes de navigation entre les navigateurs et autres (c'était acceptable pour moi). Quoi qu'il en soit, vous pouvez lui donner l'apparence d'une cellule qui s'étend sur toutes les colonnes. Dans, 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 hack je suppose (donc pas recommandé). Une autre option serait de jouer avec les divs flottants, mais c'est beurk!

Faire

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

Ne le fais pas

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

En guise de réponse partielle, voici quelques points à propos de colspan="0"ce qui a été mentionné dans la question.

tl; version dr:

colspan="0"ne fonctionne dans aucun navigateur. W3Schools a tort (comme d'habitude). HTML 4 a dit que cela colspan="0"devrait entraîner une colonne sur toute la table, mais personne n'a implémenté cela et il a été supprimé 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 cela; essayez-le sur n'importe quel navigateur que vous aimez.

  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>

  Exécuter l'extrait de codeMasquer les résultats

  Développer l'extrait

• La spécification HTML 4 (maintenant ancienne et obsolète, mais actuelle lorsque cette question a été posée) a en effet dit que cela colspan="0"devrait être traité comme s'étendant sur toutes les colonnes:

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

  Cependant, la plupart des navigateurs ne l'ont jamais implémenté.

• HTML 5.0 (a fait une recommandation de candidat 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 tous le libellé cité dans HTML 4 ci-dessus, et conviennent à l'unanimité qu'un colspande 0 n'est pas autorisé, avec cette formulation qui apparaît dans les trois spécifications:

  Les éléments tdet thpeuvent avoir un colspanattribut de contenu spécifié, dont la valeur doit être un entier non négatif valide supérieur à zéro ...

  Sources:

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

• Les affirmations suivantes de la page W3Schools liées à la question sont - au moins de nos jours - complètement fausses:

  Seul Firefox prend en charge 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 méprisé par les développeurs Web pour ses inexactitudes fréquentes, considérez ceci comme une leçon pour savoir pourquoi.

Pour IE 6, vous souhaiterez égaler colspan au nombre de colonnes de votre table. Si vous avez 5 colonnes, vous aurez envie: 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=0comme colspan=1.

Le bug est bien documenté .

Si vous utilisez jQuery (ou que cela ne vous dérange pas de l'ajouter), cela fera mieux le travail 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 l'implémentation, 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 qui ne fonctionnera pas, ne claquez pas la réponse, expliquez dans les commentaires et je mettrai à jour si elle peut être couverte.

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

Selon le W3C, l' colspan="0"option n'est valable qu'avec COLGROUPtag.

Ci-dessous, une solution es6 concise (similaire à la 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>

Je veux juste ajouter mon expérience et répondre à cela.
Remarque: Cela ne fonctionne que lorsque vous avez un prédéfini tableet un travec ths, mais que vous chargez dynamiquement vos lignes (par exemple via AJAX).

Dans ce cas, vous pouvez compter le nombre de ths dans votre première ligne d'en-tête et l'utiliser pour couvrir toute la colonne.

Cela peut être nécessaire lorsque vous souhaitez relayer un message alors qu'aucun résultat n'a été trouvé.

Quelque chose comme ça dans jQuery, où tableest votre table d'entrée:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

Je suis peut-être un simple penseur mais je suis un peu perplexe, ne connaissez-vous pas le numéro de colonne de votre table?

Par ailleurs, IE6 n'honore pas le colspan = "0", avec ou sans définition d'un colgroup. J'ai également essayé d'utiliser thead et th pour générer les groupes de colonnes mais le navigateur ne reconnaît pas la forme colspan = "0".

J'ai essayé avec Firefox 3.0 sur Windows et Linux et cela ne fonctionne qu'avec un doctype strict.

Vous pouvez vérifier un test sur plusieurs bowser à

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

J'ai trouvé la page de test ici http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Modifier: veuillez copier et coller le lien, le formatage n'acceptera pas les parties à double protocole dans le lien (ou je ne suis pas si intelligent pour le formater correctement).

Selon la spécification, il colspan="0"devrait en résulter une largeur de table td.

Cependant, cela n'est vrai que si votre table a une largeur! Une table peut contenir des lignes de différentes largeurs. Donc, le seul cas où le rendu connaît la largeur de la table si vous définissez un colgroup ! Sinon, le résultat de colspan = "0" est indéterminable ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

Je ne peux pas le tester sur des navigateurs plus anciens, mais cela fait partie des spécifications depuis 4.0 ...

essayez d'utiliser "colSpan" au lieu de "colspan". IE aime la version camelBack ...