动态单元格宽度

Dynamic Cell Width

本文关键字：单元格 动态      更新时间：2023-09-26

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

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

相关文章：