How can I make multiple html tables have the same column widths

Question

I have multiple html tables. Each table has the same number of columns but with different sets of data in each cell.

 <table><tr>
     <td>Col 1 Table 1</td>
     <td>Col 2 Table 1</td>
     <td>Col 3 Table 1</td>
 </tr></table>

 <table><tr>
     <td>Col 1 Table 2</td>
     <td>Col 2 Table 2</td>
     <td>Col 3 Table 2</td>
 </tr></table>

I wanted to figure out the easiest way to have each comparable column across these tables (so each first column, each second column, etc) be the same width so all of the tables line up perfectly.

For some specific reasons, I can't merge these into a single table so I want to see if there is anyway to have multiple tables.

It seems like the tables (regardless of any CSS that I put in) are getting changed based on the data that's in the cell.

Any suggestions?

Solution 1

The simplest way is to use the :nth-child selector:

table td:nth-child(1) { width: 100px; }
table td:nth-child(2) { width: 300px; }
table td:nth-child(3) { width: 225px; }

<table>
  <tr>
    <td>Col 1 Table 1</td>
    <td>Col 2 Table 1</td>
    <td>Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td>Col 1 Table 2</td>
    <td>Col 2 Table 2</td>
    <td>Col 3 Table 2</td>
  </tr>
</table>

Alternatively you could give each td its' own class, but this isn't ideal as you need to manually keep tracks of those classes, which can be a pain in a dynamically amended table:

.column-1 { width: 100px; }
.column-2 { width: 300px; }
.column-3 { width: 225px; }

<table>
  <tr>
    <td class="column-1">Col 1 Table 1</td>
    <td class="column-2">Col 2 Table 1</td>
    <td class="column-3">Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td class="column-1">Col 1 Table 2</td>
    <td class="column-2">Col 2 Table 2</td>
    <td class="column-3">Col 3 Table 2</td>
  </tr>
</table>

Solution 2

How do you use the css styling? You should set fixed width to cells in first row of each table.

<table>
  <tr>
    <td style="width:100px"></td>
    <td style="width:120px"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

Edit: It's of course better to use css classes, but you can change that once you will see if it works for you.

<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>
<!-- ... -->
<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

etc..

Solution 3

Applying fixed widths to the <td> elements should work. If it isn't working for you, perhaps there is a style overriding the style you specified or you have a syntax error in your CSS. Did you forget the units (e.g. px, em)? Use Firebug (or a similar tool) to determine which styles are being applied/overridden. Generally, something similar to this should work:

td {
    width: 200px;
}

I don't know if this is feasible for your codebase, but another option is to specify a single table with multiple <tbody> elements. Like this:

<table>

<tbody><tr>
     <td>Col 1 Table 1</td>
     <td>Col 2 Table 1</td>
     <td>Col 3 Table 1</td>
 </tr></tbody>

 <tbody><tr>
     <td>Col 1 Table 2</td>
     <td>Col 2 Table 2</td>
     <td>Col 3 Table 2</td>
 </tr></tbody>

 </table>

Any markup appearing in between your 2 tables would need to be part of the larger table too. You could place that content in a 3rd <tbody> element containing only one row and one cell if needed. Again, I'm not sure how well your codebase might lend itself to this refactoring, but I'm putting it out there as an option.

Comments

[Zarepheth]

Using multiple <tbody> and <thead> elements worked in my case. Some creative CSS styling on <thead> elements allowed virtual space between the sections making them appear like independant tables, but all the columns now line up.

[Zarepheth]

The creative CSS was done by giving each table three <thead> elements, one for a spacer, one for the caption, and one for the traditional column headings.