Javascript 你们如何保持两张桌子'；调整大小时是否同步列宽？

我环顾四周，似乎找不到一个合适的解决方案，不需要一些疯狂的JavaScript，来解决以下问题

本例中有两个单独的表。第一个仅用于标题。第二个是身体。我们需要两个表，因为这个特性的要求是body表是本地可滚动的，这意味着在body滚动时头部需要保持可见。我们不能使用任何新的花式HTML5透视表，因为我们必须支持IE

---

有没有一种方法可以用纯CSS实现这一点？它不一定是完美的，只要它看起来像样就行了，这就是我所需要的。

这是一个使用Jquery的概念示例。（您可以按常规操作，但需要更多代码）

没有“疯狂的javascript”：D

---

这里有一个可以工作的小提琴，有一些css可以使它看起来更好：

表格可以调整到尽可能小的大小。标题表的内容较窄，因此可以在调整大小之前调整到较小的宽度。

---

非Javascript解决方案是为所有列定义宽度，或者为表定义一个

minwidth

属性，该属性适合两个最小宽度中较大的一个。

只需CSS即可。只需在两个表、trs和tds上设置宽度，应用换行，并将表布局设置为固定。最后一个设置使其使用定义的列宽，而不是由单元格内容的宽度确定

#tb1{宽度：80%；}
#tb2{宽度：80%；}
#tb1 tr{宽度：100%；}
#tb2 tr{宽度：100%；}
.col1{宽度：35%；}
.col2{宽度：35%；}
.col3{宽度：20%；}
.col4{宽度：10%；}
#tb1，#tb2{表布局：固定；}
#tb1 td，#tb2 td{word wrap:break word；}

标题1
标题2
标题3
标题4
内容00001
内容02
内容0000000000003
内容00000000000000000000 4

我可以为您提供一个javascript解决方案，它不是“疯狂的javascript”…请随意将其作为答案发布：）为什么要将函数放在全局名称空间中？此外，在每次触发resize事件时触发任何函数都是不合理的，在短时间内可能会有几十个（如果不是几百个）触发器。

<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>

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();