我环顾四周,似乎找不到一个像样的解决方案,它不需要一些疯狂的 JavaScript,就可以解决以下问题。
示例中有两个单独的表。第一个仅用于标题。二是对 body 。我们需要两个表,因为此功能的要求是主体表可以在本地滚动,这意味着标题需要在表体滚动时保持可见。我们不能使用任何新奇的 HTML 5 数据透视表,因为我们必须支持 IE。
有没有办法用纯 CSS 来完成这个?它不必是完美的,只要它看起来不错就是我所需要的。
最佳答案
这是使用 Jquery 的概念示例。 (你可以做到 Vanilla ,但需要更多的代码)
<table id="tb1" border="1">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
<td>Title 4</td>
</tr>
</table>
<table id="tb2" border="1">
<tr>
<td>Content 00001</td>
<td>Content 02</td>
<td>Content 0000000000003</td>
<td>Content 000000000000000000004</td>
</tr>
</table>
JS:
function SetSize() {
var i = 0;
$("#tb2 tr").first().find("td").each(function() {
$($("#tb1 tr").first().find("td")[i]).width(
$(this).width()
);
i++;
});
}
$(window).resize(SetSize);
SetSize();
没有“疯狂的 javascript”:D
这是一个有效的 fiddle ,带有一些 CSS 以使其看起来更好:http://jsfiddle.net/5mfVT/
关于javascript - 如何在调整大小时保持两个表的列宽同步?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23813913/