向2个表格添加滚动条
Adding scroll bars to 2 tables
我正在尝试为包装在div中的两个表显示两个单独的滚动条。
我的代码如下
<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/
将以下样式添加到两个表父div:
<div style="...;overflow-y:auto;max-height:100px;">
Js报价:http://jsfiddle.net/gQyYe/
您必须为div指定高度:100px和溢出:auto样式,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/
希望这能帮助
这里有一个答案可能会有所帮助——我希望。在任何情况下,我都更喜欢overflow:auto;
相关文章:
- 在窗口中添加滚动条
- 如何在html5,Android,Phonegap中添加滚动条
- 无法使用jQuery自定义内容滚动条将自定义滚动条添加到iframe
- 通过 ajax 使用自定义滚动条向元素添加内容
- 使用JavaScript向jQuery自动完成添加滚动条
- 如何在JQuery中添加和删除一个类来切换body标记上的滚动条
- 在javascript中添加滚动条
- 当任何块级元素的视口较窄时,添加水平滚动条
- 如何为模式窗口中呈现的部分视图添加滚动条
- 如何将滚动条添加到仅在悬停时出现的固定侧边栏
- 添加滚动条
- 动态添加/创建的移动滚动条无法正常工作
- 当我通过javascript添加警报并取消事件时,滚动条消失了
- 溢出隐藏添加在删除滚动条的正文标签中
- 如何通过JavaScript / css在弹出窗口中添加滚动条
- NVD3 是否有将滚动条添加到 NVD3 图表的现有方法
- 如何向jquery滚动条添加偏移量
- 点击滚动条,需要添加一些像素
- 向窗体滚动条添加延迟
- 如何将滚动条添加到我的动态表中