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

Just specify the appropriate width in the first row of each column in the table:

style="width:300px";

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>

Answer 3

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 4

Table cells are fluid by nature, so that is not possible in just html / css unless you give the columns a fixed width (fixed can of course also be a percentage).

You could of course use javascript to find the widest table, get its column widths and use those values for the smaller table, but the solution suggested by belugabob as a comment to your question is far better.