Colspan toutes les colonnes

Question

Comment puis-je spécifier un td balise doit couvrir toutes les colonnes (lorsque le montant exact de colonnes dans la table sera variable/difficile de déterminer si le code HTML est en cours de rendu)? w3schools mentionne que vous pouvez utiliser colspan="0", mais cela ne veut pas dire exactement ce que les navigateurs prennent en charge que la valeur (IE 6 est dans notre liste à l'appui).

Edit: Il semble que le paramètre colspan pour une valeur supérieure au montant théorique de colonnes vous pouvez avoir des résultats, mais il ne fonctionnera pas si vous avez de la table-mise en page en mode fixe. Existe-il des inconvénients à l'utilisation d'un système automatique de mise en page avec un grand nombre de colspan? Est-il un plus bonne façon de le faire?

Answer 1

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

Il s'agit d'un hack et de ne PAS assurer votre ligne s'étend sur toutes les colonnes

Utiliser seulement ceci:

colspan="100%"

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

Answer 2

J'ai IE 7.0, Firefox 3.0 et Chrome 1.0

Le colspan="0" attribut dans un TD est PAS étendant à travers tous les TDs dans l'un de ces navigateurs.

Peut-être pas recommandé, car le balisage de la pratique, mais si vous donnez une plus colspan valeur que le total de la possible sans. de colonnes dans les autres lignes, puis la TD s'est étendue sur toutes les colonnes.

Cela ne fonctionne PAS lors de la table-layout propriété CSS est réglé sur fixe.

Encore une fois, ce n'est pas la solution parfaite, mais semble fonctionner dans les 3 versions du navigateur lors de la table-layout propriété CSS est automatique. Espérons que cette aide.

Answer 3

Pour IE 6, vous aurez envie de l'égalité colspan le nombre de colonnes de votre tableau. Si vous avez 5 colonnes, alors vous aurez envie: colspan="5".

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

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

Le bug est bien documenté.

Answer 4

Si vous utilisez jQuery (ou n'avez pas l'esprit de l'ajouter), cela va faire le travail mieux que l'un 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écorer n'importe quel td/th j'ai besoin ajusté avec une classe comme "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 mise en œuvre cela ne fonctionne pas pour, ne pas claquer la réponse, expliquer dans les commentaires et je vais mettre à jour si elle peut être couverte.