1

我正在尝试为包含在 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/

4

3 回答 3

1

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

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

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

于 2013-02-18T09:19:06.340 回答
1

您必须为每个表的直接父 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/

希望这可以帮助

于 2013-02-18T09:24:49.763 回答
0

这里有一个可能会有所帮助的答案- 我希望。overflow:auto;无论如何我都希望

于 2013-02-18T09:09:57.010 回答