web-dev-qa-db-fra.com

La largeur de la colonne de table doit être la même pour deux tables

Il y a deux tables de largeur 600px et 5 colonnes chacune. Cependant, la largeur n'a pas été définie pour chaque colonne. Ici, je veux que la largeur des colonnes soit identique dans les deux tableaux. Vous pouvez utiliser CSS ou jQuery. Et, je ne veux pas fixer la largeur de la colonne manuellement.

Exemple HTML: 

<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>content content content</td>
        <td>con</td>
        <td>content content content</td>
        <td>content content content</td>
        <td>content content content</td>
    </tr>
</table>

Toute aide serait très appréciée.

htmlcsswidth
17
Raju Sarvasiddi

Si vous voulez que toutes les colonnes aient la même largeur, et puisque vous êtes sûr que vous aurez exactement cinq colonnes dans chaque tableau, je suggérerais:

<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>
20
Passerby

Je sais que cette question date d'un an, mais il existe un moyen de faire ce que vous demandez! Dans la balise table, vous pouvez utiliser les balises thead et tbody pour grouper des lignes. Vous pouvez également avoir plusieurs balises tbody, ce qui vous permet de garder la même largeur (car ce sera la même table), mais avec un style différent selon les besoins (ou dans mon cas, afficher et masquer).

Vous trouverez un exemple HTML dans cette réponse, copié pour retnension https://stackoverflow.com/a/3076790/89211

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>
12
Relequestual

Vous recherchez table-layout:fixed

voir exemple:

http://jsfiddle.net/RsAhk/

4
Lucas Green

La largeur de la cellule d'un tableau dépend de son contenu si la largeur n'est pas donnée via un style.

Par défaut, la plupart des navigateurs utilisent un algorithme de mise en page automatique. Le les largeurs de la table et de ses cellules sont ajustées pour correspondre au contenu.

Si vous voulez avoir une largeur exacte pour les cellules de différentes tables, commencez par comprendre la description suivante.

Les largeurs de table et de colonne sont définies par les largeurs de la table et de la colonne éléments ou par la largeur de la première rangée de cellules. Cellules en les lignes suivantes n'affectent pas la largeur des colonnes. Sous la mise en page "fixe" méthode, la table entière peut être rendue une fois que la première ligne de la table a été téléchargés et analysés. Cela peut accélérer le temps de rendu sur la méthode de mise en page "automatique", mais le contenu de la cellule suivante peut ne pas l'être s'adapter dans les largeurs de colonne fournies. Les cellules utilisent la propriété de débordement à déterminer si le contenu en débordement doit être coupé, mais uniquement si le la table a une largeur connue; sinon, ils ne déborderont pas les cellules.

CSS

table{
    table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
    width:20%;  /*20% width for 5 td elements*/
}

pour plus d'informations https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

2
Nilesh Mahajan

Si vous savez que chaque table comportera exactement 5 colonnes, appliquez width: 20% comme meilleur choix:

td {
    width: 20%;
}

Mais si vous pouvez avoir un nombre quelconque de colonnes, vous pouvez écrire un simple script JQuery pour déterminer le nombre de colonnes et définir les largeurs en conséquence.

Voici une démo de JSFiddle . J'ai modifié le code HTML pour ajouter id="first" à la première table afin d'obtenir une référence concrète. Alors le JavaScript est ceci:

var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";

$("td").css("width", width);​

Fondamentalement, il saisit la première ligne de la table #first et compte le nombre de colonnes. Ensuite, il trouve le pourcentage de largeur correspondant à ce nombre de colonnes. Ensuite, il applique cette largeur à tous les éléments <td>.

Cela fonctionnera tant qu'il n'y aura pas de colspan définie sur la tds, ce qui aurait pour effet de réduire le nombre de colonnes. Les colonnes seront égales puisque vous avez défini une largeur explicite sur les deux tables.

2
Roddy of the Frozen Peas

Définissez une classe css et formatez-la, puis utilisez-la sur les deux tables

votre temp.css

.anyClass tr td{
width: 150p;
etc...
}

et en fichier HTML

    <table id="table1" class="anyClass">

        ......
        ......
        </table>

        <table id="table2" class="anyClass">        
        ......
        ......
        </table>
0
NoNaMe