web-dev-qa-db-fra.com

Tableau HTML - Largeur de colonne fixe et variable multiple

Je dois construire une table avec 5 colonnes. La largeur du tableau est variable (50% de la largeur du contenu). Certaines colonnes contiennent des boutons de taille fixe, donc ces colonnes devraient avoir un fixe avec, disons 100px. Certaines colonnes contiennent du texte, donc je veux que ces colonnes aient des largeurs de colonne variables.

Par exemple:

Colonne1: 20% de (tablewidth - sum (fixedwidth_columns)) ''

Colonne2: 100px

Colonne3: 40% de (tablewidth - sum (fixedwidth_columns))

Colonne 4: 200 pixels

Colonne 5: 40% de (tablewidth - sum (fixedwidth_columns))

Quelle est la meilleure façon d'y parvenir?

htmlcsshtml-tablemultiple-columns
17
Basaa

Vous pouvez définir le table-layout: fixed pour l'élément table, puis définissez simplement l'attribut width sur le <td> ou <th> éléments:

table {
    table-layout: fixed;
}

Démo JSFiddle.

Depuis le MDN :

Le table-layout La propriété CSS définit l'algorithme à utiliser pour disposer les cellules, les lignes et les colonnes du tableau.

Valeurs:

fixe:
Les largeurs de tableau et de colonne sont définies par les largeurs des éléments table et col ou par la largeur de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.

33
Hashem Qolami

à largeur fixe dans un tableau, vous avez besoin du table-layout propriété définie sur fixed; Puisque vous mélangez% et px, ce ne sera pas cohérent.

Vous pouvez définir uniquement la largeur px et éventuellement une petite valeur de% et laisser l'autre colonne utiliser la largeur disponible. exemple: http://jsfiddle.net/M4Et8/2/

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>
6
G-Cyr