[afx237vi]

I have two tables on a page, each with four columns. How can I set the columns to be a fixed width in my stylesheet?

<table class="calendar">

<tr>
<td>16-21</td>
<td>Tour Down Under</td>
<td>Aus</td>
<td>2.HC</td>
</tr>

<tr>
<td>28-02</td>
<td>Tour of Qatar</td>
<td>Qat</td>
<td>2.1</td>
</tr>

</table>

That's my table, and the other is basically the same. This is the CSS I tried using:

table.calendar { width: 100%; }

table.calendar td { width: 10% 60% 15% 15%; }

But the two tables are not the same, with the columns all different widths. How can I control their widths with CSS?

[ianx]

You need to set the width on each cell:

CSS:
td.c1 { width: 10%; }
td.c2 { width: 60%; }
etc


HTML:
<td class="c1">16-21</td>
<td class="c2">Tour Down Under</td>
etc

[afx237vi]

Thanks, that works. Seems kinda clunky, but oh well... Tables and CSS just don't mix well.