我想创建一个具有固定标题和可滚动数据行的表。我希望表格与窗口的宽度相同。如果表格比窗口宽，则应该能够水平滚动数据。
水平滚动条在我当前的html代码中不起作用。有人可以解释一下原因吗？这是qazxsw poi的链接
JSFiddle demo
事实证明，如果我删除第一个表标签，它就可以正常工作。表格宽度获取窗口的宽度。
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<div id="container" style="overflow:hidden;">
<table>
<tr id="tr">
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>123</td>
</tr>
</table>
</div>
<div id="container" style="overflow:scroll;">
<table>
<tr id="tr">
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>123</td>
</tr>
<tr id="tr">
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<table>
</body>
</html>
这是一个 <div>
<div id="container" style="overflow:hidden;">
<table>
<tr id="tr">
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>
</td>
<td>
<div style="width:100px;">Kolumn123</div>123</td>
</tr>
</table>
</div>
<div id="container" style="overflow:scroll;">
<table>
<tr id="tr">
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>123</td>
</tr>
<tr id="tr">
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
<td>
<div style="width:100px;">Table Cell</div>
</td>
</tr>
</table>
</div>
</div>
，其中删除了table-tag。
问题是html代码将被插入到html页面的middel中，并且该页面有一个围绕我的html代码的表。有没有办法获得窗口的宽度，即使第一个表标签仍然存在？