Как установить ширину всех элементов в столбце таблицы с помощью CSS

Question

У меня есть макет на основе таблицы с одной основной таблицей из двух столбцов для левой и правой сторон формы. Каждый столбец содержит внутреннюю таблицу, состоящую из двух столбцов, с меткой и входным столбцом, а каждое поле находится в отдельной строке.

Могу ли я использовать CSS для установки ширины обоих входных столбцов?

* 1005 Е.Г. *

<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>

В таблице с классом "formColumn" я хочу установить ширину второго <td> с помощью серверных элементов управления. Я бы предпочел сделать это, не назначая класс каждой секунде <td> в моих списках полей.

Answer 1

Лучшее решение вокруг: используйте col теги!

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

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

Answer 2

Другое недружественное для IE6 решение -

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

Если вы не застряли в CSS, вы можете использовать группы col

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

Answer 3

Обычно вы можете сделать:

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

но IE7 не распознает последнего ребенка, поэтому вам, возможно, придется перейти с

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

IE6 не распознает селектор +, согласно quirksmode.org. Если вы планируете поддерживать IE6, у меня нет решения для вас, с вашей текущей разметкой.

Кроме того, некоторые утверждают, что вам не следует использовать таблицы для разработки макета. вашего сайта. Эта вторая таблица (formColumn) могла быть заменена на как то так:

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

Answer 4

Если вы хотите установить одинаковую ширину, это просто:

table.formColumn td {
  width: 150px;
}

Если вы хотите, чтобы они были разной ширины, это немного более проблематично, но не слишком. Самый простой вариант - просто назначить класс элементам td в первой строке:

<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>

тогда:

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


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

Так как остальная часть столбца займет эти ширины.

Вы также можете использовать селектор +, но он не поддерживается в IE6:

table.formColumn td {
  width: 150px;
}


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