將滾動條添加到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表

回答

相關問題