Question

I have two tables, each has two columns. Is there a way to get their 0th columns to be the same width?:

 // table0
 ---------------------------
 |           | words words |
 | apples    | words words |
 |           | words words |
 ---------------------------

 // table1
 ------------------------------------
 |                    | words words |
 | diamond almonds    | words words |
 |                    | words words |
 ------------------------------------

Yeah so ideally table0’s 0th column would be exactly the same width as table1’s. I need to put a label between the two tables, otherwise I’d just make them all the same table and avoid the problem completely. Something like:

           Centered Title 0
 ------------------------------------
 |                    | words words |
 | apples             | words words |
 |                    | words words |
 ------------------------------------

           Centered Title 1
 ------------------------------------
 |                    | words words |
 | diamond almonds    | words words |
 |                    | words words |
 ------------------------------------

Thank you

Answer 1

Just use css in a <colgroup>

Your table

<table border="1">
  <colgroup class="title"></colgroup>
  <colgroup class="description"></colgroup>
  <tr>
    <td>apples </td>
    <td>words words words words words words words</td>     
  </tr>
</table>

CSS

.title{
   width: 100px;   
}   

.description{
    width: 200px;   
}

jsFiddle Example