выравнивание столбцов в двух отдельных (но связанных) HTML-таблицах

Question

Я реализую таблицу с фиксированным заголовком, используя такую ​​настройку:

<div style="padding-right:18px"><!-- to account for the scrollbar on the other div -->
  <table id="head">
    <tr>
       <th>Col 1</th>
       <th>Col 2</th>
    </tr>
  </table>
</div>
<div style="height:400px; overflow-y:scroll">
  <table id="body">
    <tr>
       <td>Val 1a</td>
       <td>Val 2a</td>
    </tr>
    <tr>
       <td>Val 1b</td>
       <td>Val 2b - this cell is wide</td>
    </tr>
  </table>
</div>

Я использую Dojo, чтобы после загрузки страницы ширина столбцов была одинаковой:

dojo.addOnLoad(function(){
    var $bodyRow = dojo.query('#body tr')[0];
    var $headRow = dojo.query('#head tr')[0];
    dojo.forEach($bodyRow.cells, function(item, index){
        var w = item.offsetWidth;
        dojo.style($headRow.cells[index], 'width', w + "px");
    });
});

К сожалению, хотя ширина корректируется, она недостаточно корректируется, чтобы выстроиться в линию. Кто-нибудь знает, почему это не работает? или лучше? Примечание: это должно работать в IE6.

Answer 1

offsetWidth возвращает ширину элемента, отступы и границы. устанавливая ширину, используя стиль элемента, вы только устанавливаете ширину элемента поэтому каждый столбец будет выключен суммой всех горизонтальных границ и отступов предыдущих столбцов

попробуйте это

dojo.addOnLoad(function(){
    var $bodyRow = dojo.query('#body tr')[0];
    var $headRow = dojo.query('#head tr')[0];
    dojo.forEach($bodyRow.cells, function(item, index){
            var w = dojo.style($bodyRow.cells[index], 'width');
            dojo.style($headRow.cells[index], 'width', w + "px");
    });
});

-Enrico

Answer 2

Вы пытались установить ширину в CSS или вам нужно реализовать изменение размера столбцов и все такое прочее? Я не уверен, что javascript является ответом здесь.

Попробуйте что-то вроде:

th, td { width: 50%; } // get 2 equal width columns in both tables

PS, в таблице body лучше использовать элементы <td>, так как <th> предназначен для заголовков столбцов / строк. Также облегчает различие, когда вы пишете свой CSS.

Answer 3

Ширина является динамической и должна отображаться в зависимости от содержимого. Для некоторых столбцов я мог бы добавить предложение в css, но в конце мне нужно настроить размеры в соответствии с тем, что фактически отображалось в браузере.

(В реальном коде я использую s. Я просто забыл поменять с копированием и вставкой для моего игрушечного примера выше.)