Any way to synchronize table column widths with HTML + CSS?

Question

I have a number of tables with the same columns and it would look a lot nicer if they shared the same column widths. Is such a thing possible? Putting them in the same table with some rows with no borders between them isn't an option.

Edit: Yeah I'm aware I can fix the widths myself but I was hoping for something that would tie in to the browser's column width algorithm but simply tied two or more tables together for the purpose of doing that layout.

I didn't think such a thing was possible but I thought I'd check just in case.

Answer 1

If you're not too picky about which column widths the browser comes up with, as long as they're the same across different tables, you can use the CSS table-layout property (supported by all major browsers) in combination with a table width:

table {     table-layout: fixed;     width: 100%; } 

This causes all columns (without a specified width) to have the same width, regardless of the table content.

Answer 2

It's only possible if you can fix-width the columns. If you can set a fixed width then some css like this should work:

td {     width: 25%; } 

You can customize each columns width like this:

<table>   <tr>     <td class="col1">...</td>     <td class="col2">...</td>   </tr> </table> ... <table>   <tr>     <td class="col1">...</td>     <td class="col2">...</td>   </tr> </table> 

and then specify the widths like this:

.col1 {    width: 25%; } .col2 {    width: 75%; }