javascript - 动态单元格宽度

Question

我有两张 table ，一张放在另一张上面。最上面的曾经是标题，所以我可以向下滚动而不会丢失表列名称。第二个是动态生成的表格，具有不同的单元格长度。第二个表格也有改变单元格宽度的动态输入。我试图找出一种设置顶层表格(标题)宽度的方法，以动态地更改其单元格长度与底层表格。我在谷歌上搜索过，只找到静态的方法来做这件事。任何帮助将不胜感激。我不希望完整的代码只是一个入门指南。这是我的表格的 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因为这是您唯一需要的。

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