[Wylug-help] HTML/CSS table width

Wed May 7 14:55:37 BST 2008

On Wed, May 07, 2008 at 02:34:30PM +0100, Christopher Birchall wrote:
> Hi Gary,
> 
> You could do it like this:
> 
> <style>
> 	.tableWide{
> 		width:100%;
> 	}
> 	.tableWide th{
> 		width:20%; /* or whatever width you want */
> 	}
> </style>
> 
> <table class="tableWide">
> 	<tr>
> 		<th>left content</th>
> 		<td>right content</td>
> 	</tr>
> </table>

Or you could try something like this. 

<html>
<head>
  <style type="text/css">
    div {width: 60%}
    table { width: 100%;}
    .foo { width: 40%; }
    .bar { width: 30%; }
    td { height: 3em; border: solid 5px red; }
    th { height: 3em; border: solid 5px green; }

  </style>
</head>
<body>

<div>
  <table>
    <col class="foo">
    <col class="bar">
    <col class="bar">
    <tr>
      <th> stuff </th>
      <td> stuff </td>
      <td> stuff </td>
    </tr>
  </table>

</div>

</body>
</html>

It uses the <col> element for metadata and sizing *only* columns.

It also avoids the need to put unique ids or classes on different types of th
(row headers and column headers) or td or tr.

General advice on CSS coding style:

  1. Use HTML (including metadata) properly

  2. Avoid uneccessary specificity (e.g. ids and classes on everything) ... it invariably
     leads to even more unecessarily specific rules, to override unwanted side-effects
     from elsewhere in the stylesheet.

  3. Use descendent selectors, etc for selecting by context/position

  4. Use attribute selectors and psuedo-class selectors where supported

Dave