Aligning columns from different tables

Question

Let's say I have two tables with some text in between:

<table>
    <tr><td>A</td><td>0000</td><td>Some text goes here...</td></tr>
    <tr><td>B</td><td>11</td><td>... and here</td></tr>
</table>

Some text goes here.

<table>
    <tr><td>CCC</td><td>1</td><td>Some text goes here...</td></tr>
    <tr><td>DDD</td><td>0</td><td>... and here</td></tr>
</table>

Is is possible to make these two tables having the same column width? That is I want the first column of table 1 to be 3 characters (eg CCC) big ; and I want the second column of table 2 to be 4 characters (eg 0000) big.

Please note that I don't know what the width of each column should be, therefor I don't want to define it beforehand in a CSS file. I'm more interested in a dynamic approach using Javascript.

The different steps would be something like :

1. Build the two tables;
2. Get the maximum width of columns 1 and 2;
3. Update the CSS properties of my tables using these values.

Answer 1

1. (put ids on your table)

2. You can use jQuery selectors to get all your width values of your tds like :

     var maxWidth = 0; $("#table1 td").each(function() { var width = $(this).css("width"); if(width > maxWidth) maxWidth = width; }); 

3. And then

     $("#table1 td").css("width", width); 

Answer 2

Using JQuery you could do the following:

 $(document).ready(function() {
     var tdWidth = 0;
     $('td').each(function() {
        width = $(this).width();
        if(width > tdWidth) tdWidth = width;
     });

     $('td').css("width", tdWidth);
 });