1

我正在使用这种设置实现一个带有固定标题的表：

<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 中工作。

4

3 回答 3

1

您是否尝试过在 CSS 中设置宽度，或者您是否需要实现列大小调整和所有爵士乐？我不确定javascript是这里的答案。

尝试类似：

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

PS，在“正文”表中，最好使用列/行标题的<td>元素。<th>也使您在编写 CSS 时更容易区分。

于 2009-01-20T18:58:44.140 回答
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");
    });
});

-恩里科

于 2009-01-20T19:45:03.003 回答
0

宽度是动态的，应根据内容呈现。对于某些列，我可以在 css 中添加一个建议，但最后，我需要将大小调整为浏览器中实际呈现的大小。

（在我使用 s 的真实代码中。我只是忘记更改我为上面的玩具示例复制和粘贴的内容。）

于 2009-01-20T19:04:17.373 回答