I currently have a table within my page at : http://www.fir3net.com/Firewalls/Juniper-Netscreen/juniper-commands.html

The first 2 tables have been assigned a class of X1. My aim is to do the following :

  1. Set the table to a width of 85%
  2. Set the first column to a set width
  3. Set a black border around each cell with no spacing

So far I have the following CSS :

table.X1 {
width: 85%;
}

table.X1 td {
border: 0.1em solid black;
}

Can anyone help me out with the rest. Im tried border-collapse and border-spacing but they fail to work (??).

Thanks in advance...

You didn't tell us what it is doing wrong.

You need to put classes in the table and in the cells.

Use lowercase for your classes.

Use the CSS:

.x1 {width: 85%; border: 0.1em solid black collapse;}
.y1 {border: 0.1em solid black;}
.z1 {border: 0.1em solid black; width: 20%;}

I find that I have to use the cellspacing attribute in the table tag to get this to work on all browsers:

<table class="x1" cellspacing="0">
 <tr>
  <td class="z1">This is the first cell, with a 20% width</td>
  <td class="y1">This is the second cell, without a 20% width</td>
  <td class="y1">This is the third cell, without a 20% width</td>
 </tr>
 <tr>
  <td class="z1">This is the first cell, with a 20% width</td>
  <td class="y1">This is the second cell, without a 20% width</td>
  <td class="y1">This is the third cell, without a 20% width</td>
 </tr>
</table>

How about ???

<table cellspacing="0" cellpadding="0" width="85%" border="1">
  <tr>
    <td width="100">Left Column</td><td>Right Column</td>
  </tr>
</table>