col width in css

[ferren]

A working table which maintains a semblance of formatting as window width is changed from 50% to 100% of the usual landscape monitor is at

http://www.electromontis.net/evoligion/_C/C11.shtml#T11.1

The code fragment that makes this work is

...

<col width="110px"/>

<col width="150px"/>

<col /> <!-- This column absorbs width change -->

<col width="40px"/>

<thead>

<tr><th>Instinct</th>

<th>Synonyms</th>

<th>Utility</th>

<th>Chap</th></tr>

</thead>

<tbody>

<tr class="red">

<td><b>Instinct-I</b></td>

<td>Alpha-male egoism, <i>machismo</i></td>

<td>Self propagating.</td>

<td>11</td></tr>

...

The validator says <col width=...> is obsolete and airily adds, 'use CSS', without further suggestions. I can't find anything in CSS that does this without style statements in each table box, which seems exceedingly inelegant. What am I missing?

[Ingolme]

You can give a class name to the <col> elements, but I'm not sure how well CSS is supported on them.

 

You can also give a class name to each cell of a column:

<tr>
  <th class="instinct">Instinct</th>
  <th class="synonyms">Synonyms</th>
  <th class="utility">Utility</th>
  <th class="chap">Chap</th>
</tr>

Then use CSS to give the widths:

.instinct {
  width: 110px;
}

.synonyms {
  width: 150px;
}

.chap {
  width: 40px;
}