Question

我有两个表一个在另一个之上。最上面的一个用作标题，因此我可以向下滚动而不会丢失表列名称。第二个是动态生成的表，具有各种单元长度。第二个表还具有动态输入，可以更改单元格的宽度。我试图找出一种方法来设置顶部表（标题）的宽度，以使用底部表动态地更改其单元格长度。我搜索过Google并且只找到了静态方法。任何帮助将不胜感激。我不希望完整的代码只是一个开始的方向。这是表格的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>

Answer 1

您可以使用thead元素作为标题，然后使用tbody作为动态生成内容的容器。然后，您可以使用css播放tbody进行滚动 - 您需要将固定高度设置为<tbody>，例如height: 200px，这取决于您的设计 - 在这种情况下，如果所有<tr>的高度超过<tbody>上设置的高度，则会显示滚动条。你可能想要设置oveflow-y: auto，因为这是你唯一需要的。{/ p>

这不需要任何额外的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>

Answer 2

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

动态单元格宽度

2 个答案: