Colspan toutes les colonnes

Il suffit d'utiliser ceci:

colspan="100%"

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

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

Si vous voulez créer une cellule 'title' qui couvre toutes les colonnes, comme en-tête de votre table, vous pouvez utiliser la balise caption ( 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 (n'essayez pas cela à la maison!)), au lieu de cela, il s'étend sur la largeur du table. Il y a quelques problèmes de navigateur avec les frontières et tels (était acceptable pour moi). Quoi qu'il en soit, vous pouvez le faire ressembler à une cellule qui couvre toutes les colonnes. À l'intérieur, vous pouvez créer des lignes en ajoutant des éléments div. Je ne suis pas sûr 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 des divs, mais c'est beurk!

Do

<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 voudrez égaler colspan au nombre de colonnes dans votre table. Si vous avez 5 colonnes, alors vous voudrez: colspan="5".

La raison en est que IE gère 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é .

Si vous utilisez jQuery (ou si cela ne vous dérange pas de l'ajouter), cela fera le travail mieux 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" alors 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 dans les commentaires et je mettrai à jour si cela peut être couvert.

Une autre solution fonctionnante mais laide: colspan="100", où 100 est une valeur plus grande que les colonnes totales dont vous avez besoin colspan.

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

Comme réponse partielle, voici quelques points à propos de colspan="0", mentionnés dans la question.

TL;version dr:

colspan="0" ne fonctionne pas dans n'importe quel navigateur. W3Schools est faux (comme d'habitude). HTML 4 a dit que colspan="0" devrait faire en sorte qu'une colonne couvre toute la table, mais personne n'a implémenté cela et il a été supprimé de la spécification après HTML 4.

Un peu plus de détails et de preuves:

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

  Voici un Démo montrant ceci; 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) Est-ce que a effectivement dit que colspan="0" devrait ê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 lequel la cellule est définir.

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

• HTML 5.0 (fait une recommandation de candidat en 2012), le WHATWG HTML living standard (le standard dominant aujourd'hui), et la dernière spécification W3 HTML 5 ne contiennent pas le libellé Cité de HTML 4 ci-dessus, et conviennent unanimement qu'un colspan de 0 n'est pas autorisé, avec ce libellé qui apparaît dans les trois Spécifications:

  Les Éléments td et th peuvent avoir un contenu colspan attribut 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 revendications suivantes de la page W3Schools liée à la question sont - au moins de nos jours-complètement faux:

  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

  Néant.

  Si vous n'êtes pas déjà au courant que W3Schools est généralement tenu au mépris par les développeurs web pour ses inexactitudes fréquentes, considérez ceci comme une leçon de pourquoi.

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

Dans ce cas, vous pouvez compter le nombre de th 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 transmettre un message lorsque 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 {[0] } devrait entraîner 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 moteur de rendu connaît la largeur de la table si vousDé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 les anciens navigateurs, mais cela fait partie de spécification depuis 4.0...

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

En passant, IE6 n'honore pas colspan= "0", avec ou sans colgroup défini. 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

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

J'ai eu le même problème - Comment j'ai résolu 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...