Pourquoi est-colspan pas appliquée comme prévu

J'ai une table ci-dessous. La deuxième ligne a défini trois colonnes, l'une avec colspan=8 et les autres avec colspan=1. Encore, les cellules ne sont pas sollicités en fonction de la colspan, la "largeur" sont un petit peu plus pour la deuxième cellule la plus large et la troisième.

<table class="floating simpletable">
    <tbody>
        <tr><td colspan="10">1st row</td></tr>
        <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
        <tr><td colspan="10">3rd row</td></tr>
        <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
    </tbody>
</table>

Quel est le problème et comment le résoudre?

Où est la ligne qui contient 10 cellules?
C'est la première ligne. Dois-je définir la ligne avec 10 cellules d'une certaine façon?

OriginalL'auteur Nicsoft | 2012-02-13

  1. 10

    Les largeurs de cellules dépendent du contenu de la cellule, HTML et CSS paramètres pour les largeurs, navigateur, et éventuellement de la phase de la lune. Le colspan attribut juste spécifie le nombre de colonnes (d'où, combien d'emplacements dans la grille de la table) une cellule occupe.

    Si vous voyez la dernière cellule de la ligne 2 le plus grand, alors la raison en est probablement qu'elle a le plus de contenu (ou il y a un réglage de la largeur). Votre code de démonstration ne démontre pas un tel comportement.

    Si vous ne voulez pas les largeurs de colonne d'ajuster les exigences de taille de cellules, de définir les largeurs de manière explicite dans le CSS (ou en HTML). Avant cela, il est préférable de supprimer toutes les complications inutiles de la structure de la table. Si votre code de démonstration reflète l'ensemble de la structure, puis les colonnes 2 à 8 sont inutiles division, c'est à dire qu'ils pourraient être transformées en une seule colonne. Démonstration (avec les pauvres de style largeurs en pixels juste pour la précision):

    <table class="floating simpletable" border>
    <col width=100><col width=100><col width=100>
    <tbody>
        <tr><td colspan="4">1st row</td></tr>
        <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
        <tr><td colspan="4">3rd row</td></tr>
        <tr><td>span</td><td colspan="3">other span</td></tr>
    </tbody>
</table>

    Sans une réécriture de ce genre, je crains que votre table ne respecte pas le modèle de table de HTML, comme actuellement, il n'existe pas de cellule qui commence dans la colonne 3 colonne ou 4 ou...

    Mon exemple est celui qui ne fonctionne pas. Mais votre suggestion d'ajouter un <col...> balise pour chaque colonne résolu. J'ai ajouté dix de ceux et de définir la largeur=10% pour chacun. Merci! Mais dans votre exemple, vous avez ajouté que trois <col>, ne devrait-elle pas être de quatre d'entre eux puisque vous utilisez colspan=4?
    Dans ma démonstration, la dernière colonne prend juste ce dont il a besoin. Pour atteindre ce que je pense que vous visez, vous pouvez utiliser (lors de l'utilisation de balisage) ` <col width=10%><col width=70%><col width=10%><col width=10%>`. Votre approche de dix colonnes, chacune de 10% à l'échelle est probablement pas robuste, car elle ne permet pas de résoudre le modèle de table question.
    Ok, je comprends pourquoi vous avez quitté la dernière col. Mais la lecture sur la table de modèle, le client doit utiliser le <col> de décider du nombre de colonnes, donc je suppose que c'est pas mal d'avoir un <col> pour chaque colonne. Pouvez-vous m'expliquer pourquoi mon chemin n'est pas aussi robuste que votre chemin? Peut-être que je manque de som compréhension du modèle de table...
    Le HTML5 texte sur le modèle de table est plutôt compliqué et formelle: whatwg.org/specs/web-apps/current-work/multipage/... Mais si vous utiliser le validateur validator.w3.org pour vérifier le code que vous avez posté, avec <!doctype html> inséré au début, il est dit: “les colonnes de la Table dans la gamme de 3...8 établies par élément td ont pas de cellules début.” Note: mon projet de balisage n'est pas conforme à HTML5 brouillons, car ils nécessitent un quatrième <col> élément (pour raison logique—vous n'avez pas besoin de définir sa largeur, et le HTML5 n'autorise même pas de le faire en HTML).
    "et, éventuellement, de la phase de la lune" :))

    OriginalL'auteur Jukka K. Korpela

  2. 2

    colspan détermine le nombre de colonnes d'une cellule de chevauchements, pas de la taille de ces colonnes. Utiliser les CSS width propriété pour spécifier la largeur de choses.

    C'est en fait pas de cellules je suis sens, juste mon phrasé qui était peut-être un peu floues. Je vais le corriger.

    OriginalL'auteur Quentin