好的，这基本上是关于可滚动表格的。
如果我有一个表格元素，我可以通过使thead 固定高度和tbody 固定高度，然后将滚动设置为自动开启来使内容可滚动（通过一些javascript 的乐趣，包括使用宽度来计算滚动条）身体。
这在 Firefox 中有效，但在 google chrome 中，thead/tbody 上的高度会被忽略，整个表格会按预期增长而不是滚动。
是否有可以应用于表格的 css 解决方案以使其在 google chrome 中也能正常工作？还是我需要将标题设为一个表，将正文设为不同的表，使用 js 或 css 确保列宽并让正文表的父级滚动其内容？
【问题讨论】：
标签： javascript html css
这是一个应该可以工作的完整解决方案（使用jQuery） 您将需要在单独的 div 元素中有两个表。每个表将具有相同的主题部分。只有 contentTable 会有 tbody 部分
<div class="scrollableTable"
<div>
<table class="headerTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
</table>
</div>
<div style="height:240px; overflow:auto;">
<table class="contentTable" style="width:100%; margin-top:-20px;">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 4</td>
<td>value 5</td>
<td>value 6</td>
</tr>
....
</tbody>
</table>
</div>
</div>
然后，每次更改数据时都必须调用此函数：
ResizeWidths($('.scrollableTable'));
function ResizeWidths(div)
{
var headerCells = $(div).find('.headerTable thead').find('th');
var contentCells = $(div).find('.contentTable thead').find('th');
for(var i =0, ii = headerCells.length;i<ii;i++)
{
if($(headerCells[i]).width()!=$(contentCells[i]).width())
$(headerCells[i]).width($(contentCells[i]).width());
}
}
【讨论】：
$(div).find('.contentTable')[0].style['marginTop'] = '-' + $(contentCells[0]).height() + 'px'; 动态分配负边距顶部。 2) 同步标题和内容 div 之间水平滚动的代码。在 FF 和 Chrome 中，我使用了 onscroll 事件。在 IE 7/8 中，我添加了一个 100 毫秒的 setInterval 调用同步方法（我知道，丑陋，但有效）。
我猜你使用的是来自以下page的脚本
为了修复 Chrome 中出现的错误，请更改以下行：
if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();
到这里：
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome = true) {
this.initIEengine()
}
else {
if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();
}
然后完美运行
【讨论】：