html表中的冻结字段

Question

我花了一整天的时间研究这个问题，最后决定寻求帮助。

对于这里的许多人来说，这确实是一个非常相似的问题，但没有一个被接受的答案接近我所需要的。如果我错了，我将不胜感激指向正确方向的指针。

我的问题是我有一个 20 行（最大）和 18 列的表。列具有多种内容类型 - 文本、选项、单选按钮...

表格的宽度远远大于可以显示的宽度，因此需要水平滚动。我需要前 4 列始终可见，其余 14 列滚动。

另一个问题是该表格的最终用户将在 iFrame 中查看它，我无法控制其中的尺寸。

我发现了一些不合适的代码片段： www.shrutigupta.com/index.php/2005/12/12/how-to-create-table-with-first-column-frozen/ （行排列不好）

acatalept.com/common/test/fixed-table.html （据我所知，是 3 张桌子）

而且，看起来最有前途但没有代码的一个： apex.oracle.com/pls/otn/f?p=11630:2:1883191096360711

在所有情况下，如果您调整窗口大小以使高度小于表格的高度，则必须将窗口滚动到底部才能找到滚动条以水平滚动表格。

我们真正需要的，并且我们唯一可以真正使用的正是在以下方面使用的方法： www.google.com/squared/search?q=world+leaders 如果您在此页面上调整窗口大小，滚动条将显示在底部，只显示需要它的列。

请帮忙，这个项目快把我逼疯了！

Answer 1

使用 css 滚动来溢出需要滚动的列 和其他人被隐藏

尝试将表格或 tds 放在 div 中，并为溢出应用样式

Answer 2

<table width="100%">
<tr>
<td id="200px">some fixed content</td>
<td>
      <table>
           create rows and table inside this table
      </table>
</td>
</tr>

</table>

Answer 3

DataTables 现在支持 ColVis，它允许您显示/隐藏列以及固定标题/固定列。这不是您一定要寻找的滚动，但可能是解决您问题的更优雅的解决方案。根据您要处理的数据量，您还可以利用排序、过滤和分页功能，让最终用户更容易使用。