Выравнивание столбцов из разных таблиц

Question

Скажем, у меня есть две таблицы с текстом между ними:

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

ли это возможно, чтобы сделать эти две таблицы, имеющие одинаковую ширину столбцов? То есть я хочу, чтобы первый столбец таблицы 1 был 3 символа (например, CCC) большой; и я хочу, чтобы второй столбец таблицы 2 составлял 4 символа (например, 0000).

Обратите внимание, что я не знаю, какова ширина каждого столбца, поэтому я не хочу заранее определять его в файле CSS. Меня больше интересует динамический подход с использованием Javascript.

Различные шаги были бы что-то вроде:

1. Построить две таблицы;
2. Получить максимальную ширину столбцов 1 и 2;
3. Обновите свойства CSS моих таблиц, используя эти значения.

Answer 1

1. (поместить иду на вашем столе)

2. Вы можете использовать jQuery selectors, чтобы получить все значения ширины ваших с.в. как:

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

3. А потом

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

Answer 2

Использование JQuery yo u могли бы сделать следующее:

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

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