How to make multiple html tables the same column widths

Question

I have several html tables. Each table has the same number of columns, but with different data sets 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 find the easiest way to have every comparable column in these tables (so that every first column, every second column, etc.) will be the same width so that all the tables line up perfectly.

For some specific reasons, I cannot combine them into one table, so I want to see if there are any tables in any case.

It seems that the tables (regardless of any CSS that I insert) change based on the data that is in the cell.

Any suggestions?

Answer 1

For more flexibility, I would provide each column with its own class.

CSS

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

HTML

 <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> 

If you have the ability to use CSS3, you can also use the nth-child selector to achieve this, which will reduce the amount of HTML you need to write.

Answer 2

How do you use css style? You must set a fixed width for the cells in the 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: Of course, it is better to use css classes, but you can change this as soon as you 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..

Answer 3

Applying a fixed width to <td> elements should work. If it doesn’t work for you, there may be a style overriding the style you specified, or you have a syntax error in your CSS. Have you forgotten units (e.g. px, em)? Use Firebug (or a similar tool) to determine which styles are applied / overridden. Generally, something similar to this should work:

 td { width: 200px; } 

I do not know if this is possible for your codebase, but another option is to specify a single table with several <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 displayed between your 2 tables should also be part of a large table. You can place this content in the third <tbody> element containing only one row and one cell, if necessary. Again, I'm not sure how well your code base can succumb to this refactoring, but I put it there as an option.

Answer 4

I am sure that with css you can do this:

 td { width: 200px } 

Answer 5

Try using javascript after loading the tables.