将滚动条添加到 2 个表答案

【问题标题】：Adding scroll bars to 2 tables将滚动条添加到 2 个表
【发布时间】：2013-02-18 09:05:34
【问题描述】：

我正在尝试为包含在 div 中的 2 个表格显示 2 个单独的滚动条。

我的代码如下

<html>
<body>



<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr>

</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

</table>

</div>
</body>
</html>

我尝试了什么：我尝试使用溢出：滚动；但是当我这样做时，两个表格都被包裹在一个滚动条中。

上述表格是动态生成的。演示：http://jsfiddle.net/HLyDq/

【问题讨论】：

标签： javascript html css html-table autoscroll

【解决方案1】：

将以下样式添加到两个表父 div：

<div style="...;overflow-y:auto;max-height:100px;">

JsFiddle：http://jsfiddle.net/gQyYe/

【讨论】：

【解决方案2】：

您必须为每个表的直接父 DIV 指定 height:100px 和 overflow:auto 样式。

这里是修改后的代码

    <html>
<body>



**<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr>

</table>
</div>
**<div style="width:100px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

</table>

</div>
</body>
</html>

一对**之间的代码是更正的行。检查这个 JSFiddle - http://jsfiddle.net/yYxuN/1/

希望对你有帮助

【讨论】：

是的。您的解决方案有效。我想知道为什么最外层 div 的背景颜色在您的解决方案中丢失了

【解决方案3】：

有一个答案here 可能会有所帮助 - 我希望如此。无论如何，我更喜欢overflow:auto;

【讨论】：