ColSpan toutes les colonnes

https://stackoverflow.com/questions/398734

29-08-2019
|

Question

Comment puis-je spécifier une balise td doit couvrir toutes les colonnes (lorsque le montant exact des colonnes dans la table sera variable / difficile de déterminer quand le code HTML est rendu)? W3Schools mentionne que vous pouvez utiliser colspan="0", mais il ne dit pas exactement ce que les navigateurs compatibles avec cette valeur (IE 6 est dans notre liste à l'appui).

Il semble que la mise en colspan à une valeur supérieure à la quantité théorique de colonnes que vous pourriez avoir fonctionnera, mais il ne fonctionnera pas si vous avez table-layout réglé sur fixed. Y a-t-il des inconvénients à l'utilisation d'une mise en page automatique avec un grand nombre de colspan? Y at-il une façon plus correcte de le faire?

La solution

Je IE 7.0, Firefox 3.0 et Chrome 1.0

Le colspan = "0" attribut dans un TD est PAS couvrant dans tous les TDs l'un des navigateurs ci-dessus .

Peut-être pas recommandé que la pratique de balisage approprié, mais si vous donnez un une plus grande valeur colspan que le total possible pas. des colonnes dans les autres lignes , le TD s'étendrait toutes les colonnes.

Cela ne fonctionne pas lorsque la propriété table-layout CSS est réglé sur fixe.

Encore une fois, ce n'est pas la solution parfaite, mais semble fonctionner dans la mentionnée ci-dessus 3 versions du navigateur lorsque la table-layout propriété CSS est automatique . Espérons que cela aide.

Autres conseils

Il suffit d'utiliser ceci:

colspan="100%"

Il fonctionne sur Firefox 3.6, IE 7 et Opera 11! (Et je suppose que sur les autres, je ne pouvais pas 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 brisera pour les tables avec table-layout: fixed css, ou plus de 100 colonnes.

Si vous souhaitez effectuer une cellule « titre » qui couvre toutes les colonnes, en-tête de votre table, 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 ferait dans la même position (ne pas essayer à la maison!)), Au lieu, il enjambe la largeur de la table. Il y a quelques problèmes avec différents navigateurs frontières et ce (était acceptable pour moi). Quoi qu'il en soit, vous pouvez le faire paraître comme une cellule qui couvre toutes les colonnes. L'intérieur, vous pouvez faire des lignes en ajoutant div-éléments. 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 déconner avec divs flottant, mais qui est beurk!

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

Pour IE 6, vous voulez égale colspan au nombre de colonnes dans votre table. Si vous avez 5 colonnes, vous aurez envie. colspan="5"

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

IE met en œuvre la définition HTML 3.2, il définit colspan=0 comme colspan=1.

Le bug est bien documenté.

Si vous utilisez jQuery (ou ne me dérange pas l'ajouter), ce va faire le travail fait mieux que tous 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 J'ai besoin ajusté avec une classe comme « maxcol » Je peux alors 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 cela ne fonctionnera pas pour, ne claquez pas la réponse, expliquer dans les commentaires et je mettrai à jour si elle peut être couvert.

En tant que réponse partielle, voici quelques points sur colspan="0", qui a été mentionné dans la question.

tl; dr version:

colspan="0" ne fonctionne pas dans un navigateur que ce soit. W3Schools est erroné (comme d'habitude). HTML 4 dit que colspan="0" devrait faire une colonne pour couvrir toute la table, mais personne mis en œuvre cela et il a été retiré de la spécification HTML 4 après.

Un peu plus de détails et des preuves:

Tous les principaux navigateurs, il traitent comme équivalent à colspan="1".

Voici une démo montrant ce; essayer sur un navigateur que vous le souhaitez.

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>

Le code HTML 4 spec (maintenant vieux et dépassé, mais à courant lorsque cette question a été posée) a fait dire en effet que colspan="0" doit être traité comme couvrant toutes les colonnes:

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

Cependant, la plupart des navigateurs ne mis en œuvre cela.
HTML 5.0 (fait une recommandation candidate de retour en 2012), le niveau de vie WhatWG HTML (la norme dominante aujourd'hui), et le dernier W3 HTML 5 spec tous ne contiennent pas le libellé cité de HTML 4 ci-dessus, et d'accord à l'unanimité qu'une colspan de 0 n'est pas autorisé, avec cette formulation qui apparaît dans les trois spécifications:

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

Sources:
Les revendications suivantes de la page W3Schools liée à la question sont - au moins aujourd'hui - complètement faux:


Seul Firefox supporte colspan = « 0 », ce qui a une signification particulière ... [Il] indique au navigateur pour enjamber la cellule à la dernière colonne du groupe de colonnes (colgroup)

et


Différences entre HTML 4.01 et HTML5

NONE.

Si vous n'êtes pas déjà au courant que W3Schools est généralement honni par les développeurs web pour ses erreurs fréquentes, considérer cela comme une leçon pourquoi.

Une autre solution de travail, mais laid. colspan="100", où 100 est une valeur plus grande que le total des colonnes, vous devez colspan

Selon le W3C, l'option colspan="0" est valide uniquement avec l'étiquette de COLGROUP.

Voici une solution ES6 concise (similaire à de réponse Rainbabba mais sans 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:. Il ne fonctionne que lorsque vous avez un table prédéfini et un tr avec ths, mais chargez dans vos lignes (par exemple via AJAX) dynamiquement

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

Cela peut être nécessaire lorsque vous voulez transmettre un message quand aucun résultat n'a été trouvé.

Quelque chose comme ça dans jQuery, où table est 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;
    }
}

Selon la spécification colspan="0" devrait se traduire par une td largeur de la table.

Cependant, cela est vrai que si votre table a une largeur! Une table peut contenir des lignes de largeurs différentes. Ainsi, le seul cas que le moteur de rendu connaît la largeur de la table si vous définir un colgroup ! Dans le cas contraire, 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 les anciens navigateurs, mais cela fait partie de la spécification depuis 4.0 ...

Peut-être que je suis un penseur droite, mais je suis un peu perplexe, ne savez-vous pas le numéro de colonne de votre table?

Par ailleurs IE6 ne respecte pas le colspan = « 0 », avec ou sans colgroup défini. J'ai aussi essayé d'utiliser thead et th pour générer les groupes de colonnes, mais le navigateur ne recognlise pas la forme colspan = « 0 ».

Je l'ai essayé avec Firefox 3.0 sur Windows et Linux et il fonctionne uniquement 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

Edit: S'il vous plaît copier et coller le lien, la mise en forme ne sera pas accepter les doubles parties de protocole dans le lien (ou je ne suis pas si intelligent pour formater correctement il)

J'ai eu le même problème - Comment je résolus mon problème .. Mettez tous les contrôles que vous souhaitez étendre dans un td

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow

ColSpan toutes les colonnes

tl; dr version:

Un peu plus de détails et des preuves:

Différences entre HTML 4.01 et HTML5