Colspan toutes les colonnes

385

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?

Bob
la source
La réponse acceptée concerne la façon de NE PAS faire cela, et cela semble avoir de sérieux inconvénients en termes de performances / cohérence. Donc je suppose que la réponse est: codez en dur le nombre de colonnes. Je ne vois aucune alternative viable.
Andrew Koster

Réponses:

268

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.

Nahom Tijnam
la source
Si vous spécifiez un doctype strict au tout début du html, Firefox 3 restitue le colspan comme requis par les spécifications html 4.01.
Eineki
253
Je suis fan de colspan="42"couvrir toute la gamme. Évidemment, c'est un problème pour> 42 colonnes, mais c'est l'un des rares nombres magiques que j'approuve.
Martin Carney
40
Je vous recommande fortement de mettre colspan = <nombre exact exact>. Je viens de frapper un énorme bug de perf dans Firefox qui m'a pris toute la journée pour comprendre. Un colspan arbitrairement grand fera s'étouffer FF sur une grande table avec border-collapse: collapse. Mon tableau avec 800 lignes et 8 colonnes prenait 5 secondes pour être rendu. Avec le bon colspan, il est de retour à une seconde raisonnable. bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop
2
Je recommande de ne pas utiliser cette méthode. Je viens d'obtenir un résultat très étrange de Chrome sur OSX (les colonnes se chevauchent).
Tzach
un autre problème trouvé dans Chrome si vous essayez de donner une bordure à l'élément TR qui contient le TD "oversize", la bordure droite ne sera pas visible.
Massimo
272

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.

Cluxter
la source
16
Testé [en plus] dans IE6 - IE8, Chrome [sur PC et Mac], Firefox 4.0 [PC et Mac], Safari 5 [PC et Mac]
hndcrftd
11
Comment est-ce encore si obscur? Cela devrait être crié à chaque coin de rue !!! Je lutte avec ce fichu problème de colspan à différents moments depuis un bon moment maintenant
hndcrftd
30
Sur Chrome et Firefox, colspan = "3%" est géré de la même manière que colspan = "3".
zpmorgan
98
@zpmorgan et @Sprog, vous avez raison! colspan="100%"signifie exactement colspan="100".
NemoStein
37
Lol, j'étais très heureux de voir enfin une solution inter-navigateurs cohérente à ce problème, seulement pour découvrir à travers les commentaires qu'il s'agit bien d'une solution trompeuse qui ne fonctionne pas comme prévu :( Je pense qu'elle ne mérite pas plus de votes positifs que la réponse acceptée = /
Francisco
64

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>
natevw
la source
1
Exactement ce que je cherchais pour mettre les contrôles de pagination au bas d'une table de données. Cela fonctionne parfaitement. Merci beaucoup.
Comencau
5
Cela ne fonctionne pas si vous souhaitez couvrir tous les cols au milieu d'une table ... comme regrouper par séparateur entre des groupes de lignes associés. (Chrome)
David Hempy
17

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>

  • 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:

  • 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.

Mark Amery
la source
4
Haha J'aime la façon dont les fonctionnalités API utiles sont supprimées complètement lorsque personne ne les met en œuvre. Processus incroyable.
Andrew Koster
14

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é .

George Stocker
la source
1
Le nombre de colonnes peut être variable, je mettrai à jour ma question pour inclure cette remarque.
Bob
Bien que les conseils du paragraphe supérieur semblent raisonnables, je pense que de nombreux détails ici ne sont pas tout à fait corrects. La spécification HTML 3.2 dit que colspans doit être un entier positif , ce qui rend colspan=0illégal; nulle part cela ne dicte explicitement que cela colspan=0devrait être géré comme colspan=1(bien que je suis sûr que c'est en fait ce que fait IE 6). De plus, la citation ne se trouve (plus?) Nulle part sur la page du forum vers laquelle vous accédez, et la plupart des résultats de recherche Google (maintenant?) Concernent des bogues liés à IE 6 colspan entièrement différents .
Mark Amery
11

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.

rainabba
la source
1
Ce serait génial si vous aviez une version JS vanille
jpaugh
Avez-vous un cas d'utilisation courant qui ne prend pas en charge $ (sélecteur) ou ne souhaitez tout simplement pas l'utiliser?
rainabba
1
Ni. Je suis simplement curieux de savoir si jQuery ajoute un avantage ici; c'est un prérequis assez lourd, et il semble que ce ne soit que peu utilisé ici.
jpaugh
C'est suffisant. Entre jQuery et Angular, il est rare que je ne dispose pas de ces outils, je les utilise par défaut. Je laisserai à quelqu'un d'autre le soin de proposer la version vanille pour l'instant.
rainabba
1
Étant donné que jQuery est quelque peu dépassé, j'ai ajouté une version / réponse es6 (je ne voulais pas mettre à jour cette réponse avec un code complètement différent).
Sjeiti
5

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.

Raptor
la source
colspan = "100" (par exemple au-delà de la limite) peut provoquer un rendu de table très étrange dans certains cas (j'essaierai de traquer certains cas de test et de poster les URL)
scunliffe
-1 parce que pour autant que je puisse déterminer la réclamation dans le dernier paragraphe est fausse. HTML 4 permet à <td>s d'avoir colspan="0"(voir w3.org/TR/REC-html40/struct/tables.html#adef-colspan ), tandis que HTML 5.0 ne permet pas span="0"sur un colgroup(voir w3.org/TR/html50/tabular- data.html # attr-colgroup-span qui stipule que "la valeur d'un attribut de contenu span ['s] doit être un entier non négatif valide supérieur à zéro." ).
Mark Amery
2

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>

Sjeiti
la source
-1

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;
    }
}
skiwi
la source
Comme la solution JavaScript publiée avant celle-ci , cela ne se généralise pas bien; le nombre de ths n'est pas nécessairement le nombre de colonnes, car certaines d'entre elles peuvent avoir un colspanensemble, et donc cela ne fonctionnera pas comme écrit pour tout le monde.
Mark Amery
-2

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).

Eineki
la source
Je suis d'accord sur la première partie: vous pourriez sûrement savoir combien de cellules vous allez avoir dans la rangée? Sinon, comment le généreriez-vous?
nickf
13
Pas nécessairement, j'ai une application avec une table générée dynamiquement AJAX et le nombre de colonnes peut changer de rappel en rappel. En outre, lors du développement, vous pouvez "connaître" le nombre de colonnes, mais cela peut changer et vous savez juste que vous en manquerez une
Mad Halfling
11
De plus, si vous ajoutez des colonnes plus tard, vous pourriez oublier de modifier le colspan, mieux vaut que ce soit toujours max.
Adam
-2

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 ...

FERcsI
la source
"cela fait partie des spécifications depuis 4.0" - Non, pas exactement. Cela faisait partie de la spécification, mais cela a été supprimé dans HTML 5 et un colspan0 a été rendu illégal. Les deux w3.org/TR/html50/... (la spécification HTML 5.0) et html.spec.whatwg.org/multipage/... (la dernière norme HTML Living WhatWG) état qui colspandoit être supérieur à zéro. Et comme indiqué dans d'autres réponses ici, les navigateurs n'ont jamais réellement mis en œuvre l'ancien comportement HTML 4 que vous citez.
Mark Amery du
-6

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


la source
4
uniquement lors de l'utilisation d'IE et de la configuration via JavaScript et .setAttribute ('colSpan', int); Notez que cela a été corrigé dans IE8 (en mode stds uniquement)
scunliffe
1
+1 - Je ne le savais pas et c'était d'une grande aide! Je ne pensais pas que colSpan fonctionnait même dans IE6.
mwilcox