我有两张 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>
最佳答案
你可以使用 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>
关于javascript - 动态单元格宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10819775/