How to set width of all elements in a table column with CSS

Question

I have a table based layout, with one main two-column table, for left and right sides of a form. Each column contains an inner, two-column table, with a label and and input column, and each field on its own row.

Could I use CSS to set the width of both the input columns?

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>

In the table with class "formColumn", I want to set the the width of the second <td>, with the server controls. I would prefer to do this without assigning a class to every second <td> in my field lists.

Answer 1

Usually, you could do:

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

but IE7 does not recognize last-child, so you might have to go with

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

IE6 does not recognize the + selector, according to quirksmode.org. If you're planning on supporting IE6, I don't have a solution for you, with your current markup.

That aside, some argue that you should not use tables to design the layout of your website. That second table (formColumn) could've been replaced with something like this:

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

Answer 2

If you want to set them to the same width it's easy:

table.formColumn td {
  width: 150px;
}

If you want them to be different widths, it's a bit more problematic but not hugely so. Easiest option is just to assign a class to the td elements in the first row:

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

then:

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


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

Since the rest of the column will take those widths.

You could also use the + selector, but it's not supported in IE6:

table.formColumn td {
  width: 150px;
}


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

Answer 3

The best solution around: use col tags!

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

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

Answer 4

Another IE6-unfriendly solution is

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

If you're not stuck on CSS, you could use col groups

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