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

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

尝试类似：

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

PS，在“正文”表格中，最好使用<td>元素，因为<th>用于列/行标题。还可以在编写CSS时更容易区分。

Answer 2

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 3

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

（在我使用的实际代码中。我只是忘了改变，我为上面的玩具示例复制并粘贴了。）

在两个单独的（但相关的）html表中对齐列

3 个答案: