我想创建一个包含固定标题和可滚动数据行的表。 我希望表格与窗口的宽度相同。如果表格比窗口宽，则应该能够水平滚动数据。
Horizontall滚动条在我当前的html代码中不起作用。有人可以解释一下原因吗？这是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>
答案 0 :(得分：0)
事实证明，如果我删除第一个表标签，它就可以正常工作。 表格宽度获取窗口的宽度。
<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>
以下是demo，其中删除了表格标记。
问题是html代码将插入到html页面的middel中，并且该页面有一个围绕我的html代码的表格。有没有办法获得窗口的宽度，即使第一个表标签仍然存在？