Ont première colonne du tableau HTML flexible lors de la table width=100%

J'ai un tableau HTML avec 8 colonnes et plusieurs lignes. Le contenu de chaque cellule est généré dynamiquement et il est difficile de prédire la largeur d'une colonne. J'ai mis la table width=100% comme je voudrais la table pour prendre toute la largeur de la div. Je voudrais les colonnes 2 à 8 pour rester la même que la largeur, comme si je n'avais pas mis une largeur de table. Ensuite, je voudrais que pour la première colonne pour développer sa largeur, de sorte que la largeur de la table devient 100%. Est-ce possible?

OriginalL'auteur Brian | 2009-12-19

  1. 5

    Définir une largeur sur la table et sur toutes les autres colonnes; le reste de la colonne va prendre tous les mou.

    L'astuce est d'utiliser table-layout: fixed de style, de sorte que la mise en page automatique de deviner algorithme (et IE est particulièrement mauvaise interprétation de celle-ci) n'a pas d'étape et le désordre quand il y a plus important que prévu quantités de contenu dans une colonne.

    En fixe le mode de disposition, la première rangée de cellules ou <col> éléments définit la largeur; d'autres lignes n'affectent pas les largeurs. De ce fait rendu plus rapide; vous devriez utilisé à disposition fixe, pour chaque tableau, vous pouvez.

    <table>
    <col class="name" /><col class="data" /><col class="data" /><col class="data" />
    <col class="data" /><col class="data" /><col class="data" /><col class="data" />
    <tr>
        <td>tiddle om pom pom</td>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
    </tr>
</table>

table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }

    OriginalL'auteur bobince

  2. 3
    <div>
<table width="100%">
<tr>
<td width="100%"></td>  <- this is col 1
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8
</tr>
</table>
</div>

    par la définition de la première cellule à 100%, elle force la cellule à essayer d'être aussi large que possible, tout en respectant la largeur du reste des cellules. Si les cellules 2-8 contient du texte, vous pouvez ajouter le texte à l'intérieur de ces cellules ne pas s'enrouler en raison de la première cellule de tenter d'être à 100% de largeur.

    La largeur de l'attribut dans le <td> élément est considéré comme l'ancienne par le WWW (world wide web) consortium.
    Non pris en charge en HTML5. Utiliser les CSS à la place.

    OriginalL'auteur chenosaurus

  3. 2

    Ensemble explicite des largeurs de 2 - 8 et de la Cellule 1 permet de déterminer sa propre largeur avec le reste de l'espace. Vous pouvez aussi définir no-wrap pour les espaces dans la première cellule, aussi, de sorte que le contenu n'emballe pas, mais à force les cellules à croître lorsque nécessaire.

    OriginalL'auteur Sampson

  4. 0

    Je pense que votre question n'est pas complet, parce que lire littéralement, la réponse est de ne pas définir d'largeurs de colonne. Chaque colonne va prendre plus de place qu'il aura, et ils vont en quelque sorte de le distribuer parmi les uns des autres.

    Pouvez-vous préciser ce que vous souhaitez atteindre?

    Je sais que si je n'ai pas mis toutes les largeurs de colonne à tous, le navigateur va distribuer l'espace supplémentaire à travers les colonnes. Le problème est que je veux que tout cet espace supplémentaire pour aller à la colonne 1.

    OriginalL'auteur Pekka 웃