将滚动条添加到2表

我想显示2个单独的滚动条包装在一个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/

来源

2013-02-18 Abhijit Gaikwad

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

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

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

来源

2013-02-18 09:19:06 Savedro

感谢奏效。 – 2013-02-18 09:21:54

有一个答案here可以帮助 - 我希望。我宁愿overflow:auto;在任何情况下

来源

2013-02-18 09:09:57 tattvamasi

您必须指定高度：100像素和溢出：自动样式到DIV，它是每个表的直接父级。

这里是校正代码

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

希望这有助于

来源

2013-02-18 09:24:49

是。你的解决方案有效我想知道为什么你的解决方案中最外面的div的背景颜色丢失 – 2013-02-18 09:32:00

我已经更新了代码以带入背景颜色。 – 2013-02-18 10:11:44

将滚动条添加到2表

回答

相关问题