Make 2 tables have the same column sizes

Question

I have 2 HTML tables that are directly on top of each other. Each table has the same number of columns, but the text they contain can differ. And each table can contain many rows. I would like for these 2 tables to have the exact same column width so that the columns always line up. I don't mind if the text within the columns wraps as much as necessary. And I cannot combine all the rows into a single table for other reasons.

Is there some way to make this happen?

Note that this solution only has to work in Firefox and the last 2 versions of IE.

Answer 1

I suggest using percentage widths on your columns, making sure that those widths always add up to 100%.

<style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

Answer 2

As far as I know you can't align the columns of two tables.

You can create one table and use the css to make it look like two.

<table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>