Comment définir la largeur de tous les éléments dans une colonne de table avec CSS

Question

J'ai une disposition basée sur une table, avec une table principale à deux colonnes, pour les côtés gauche et droit d'un formulaire. Chaque colonne contient une table interne à deux colonnes, avec une étiquette et une colonne d'entrée, et chaque champ sur sa propre ligne. Puis-je utiliser CSS pour définir la largeur des deux colonnes d'entrée?

E.g.

<table id="frameTable"> 
    <tr> 
    <td id="leftFieldList"> 
     <table class="formColumn"> 
     <tr> 
      <td>Surname</td> 
      <td><asp:TextBox.....></td> 
     </tr> 
     <tr> 
      <td>Address</td> 
      <td><asp:TextBox.....></td> 
     </tr> 
     .... 
     .... 
     <table> 
    </td> 
</table> 

Dans la table avec classe « formColumn », je veux régler la largeur de la deuxième <td>, avec les commandes du serveur. Je préférerais faire ceci sans assigner une classe à chaque seconde <td> dans mes listes de champs.

Answer 1

La meilleure solution autour de: utiliser col tags!

<style> .col2 { width: 200px; } </style> 
... 

<table class="formColumn"> 
    <colgroup> 
    <col></col> 
    <col class="col2"></col> 
    </colgroup> 
    <tbody> 
    <tr>... 
    </tbody> 
</table> 

Answer 2

Habituellement, vous pouvez faire:

table.formColumn tr td:last-child { width: 200px; } 

mais IE7 ne reconnaît pas le dernier enfant, alors vous pourriez avoir à aller avec

table.formColumn tr td+td { width: 200px; } 

IE6 ne reconnaît pas le sélecteur +, selon quirksmode.org. Si vous envisagez de prendre en charge IE6, je n'ai pas de solution pour vous, avec votre balisage actuel. Cela dit, certains soutiennent que vous ne devriez pas utiliser de tables pour concevoir la mise en page de votre site Web. Cette deuxième table (formColumn) aurait pu être remplacé par quelque chose comme ceci:

<fieldset><label ...>Surname</label><YourTextInput /></fieldset> 

Answer 3

Si vous voulez les mettre à la même largeur, il est facile:

table.formColumn td { 
    width: 150px; 
} 

Si vous voulez qu'ils soient Différentes largeurs, c'est un peu plus problématique mais pas énormément. l'option la plus simple est juste d'attribuer une classe aux éléments td dans la première rangée:

<table id="frameTable"> 
    <tr> 
    <td id="leftFieldList"> 
     <table class="formColumn"> 
     <tr> 
      <td class="left">Surname</td> 
      <td class="right"><asp:TextBox.....></td> 
     </tr> 
     <tr> 
      <td>Address</td> 
      <td><asp:TextBox.....></td> 
     </tr> 
     .... 
     .... 
     <table> 
    </td> 
</table> 

alors:

table.formColumn td.left { 
    width: 150px; 
} 


table.formColumn td.right { 
    width: 300px; 
} 

Depuis le reste de la colonne prendra les largeurs.

Vous pouvez également utiliser le sélecteur +, mais ce n'est pas pris en charge dans IE6:

table.formColumn td { 
    width: 150px; 
} 


table.formColumn td + td { 
    width: 300px; 
} 

Answer 4

Une autre solution IE6 est hostile

.formColumn td:last-child { width: 200px; } 

Si vous n'êtes pas coincé sur CSS, vous pouvez utiliser des groupes col

<table class="formColumn"> 
    <colgroup> 
     <col /> 
     <col width="200px" /> 
    </colgroup> 
    <tr> 
     <td>Surname</td> 
     <td><asp:textbox..../></td> 
    </tr> 
</table>