0

我有两张桌子，一张放在另一张上面。顶部用于作为标题，因此我可以向下滚动而不会丢失表列名称。第二个是动态生成的表格，具有各种单元格长度。第二个表格也有改变单元格宽度的动态输入。我试图找出一种方法来设置顶部表格（标题）的宽度以使用底部表格动态更改其单元格长度。我搜索了谷歌，只找到了这样做的静态方法。任何帮助将不胜感激。我不希望完整的代码只是一个开始的方向。这是我的表格 HTML5 代码。

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>


 <div style="overflow: auto;height: 22EM; width: 43EM;" class ='FeatureTable'>
  <table style="width: 42EM;" id='tableBody' border='1'>  </table>
4

2 回答 2

1

您可以使用一个thead元素作为标题，然后将 atbody作为动态生成内容的容器。然后，您可以使用 css 来滚动tbody滚动 - 您需要将固定高度设置为会出现。您可能需要设置，因为这是您唯一需要的。<tbody>height: 200px<tr><tbody>oveflow-y: auto

这不需要任何额外的 javascript，并且单元格将保持相同的宽度，因为它们嵌套在同一个表中。

它在语义和可访问性方面也很有意义，正如他们的名字所说的那样，thead并且tbody不必有两个不同的表。

<table style="width: 42EM" cellpadding="0" cellspacing="0" class ='FeatureHEAD'border = '1'id ='tableHEAD'>
<thead>
    <tr>

                                        <th >Date</th>
                                        <th >Time(s)</th>
                                        <th >Expected Act</th>
                                        <th >Video Name</th>
                                        <th >Status</th>
                                </tr>
</thead>

<tbody id='tableBody'>
</tbody>
</table>
于 2012-05-30T15:58:53.270 回答
0

我会使用 jQuery，在窗口滚动和调整大小事件时，我会遍历数据表标题 td，并将​​其宽度复制到标题表。

于 2012-05-30T15:52:08.700 回答