HTML/CSS：如何为 tr 创建滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4919629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: How to create scrollbar for tr
提问by Benjamin
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
有人能告诉我如何为内表创建滚动条吗？内表不显示在容器内。我将容器的背景涂成黄色。桌子本身是蓝色的。
I wanna see a scroll bar within the table.
我想在表格中看到一个滚动条。
Source: http://nopaste.info/e51385254e.html
来源：http: //nopaste.info/e51385254e.html
and here:
和这里：
<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<body>
</html>
回答by Shrinath
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto or scroll.
用 div 包裹你的内表。通过将宽度和高度样式设置为自动或滚动溢出，使该 div 可滚动。
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
that should work
那应该工作
回答by Oralet
Try this on div part
在 div 部分试试这个
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
如果失败，请尝试溢出：滚动表格的样式。
回答by Sotiris
Wrap your table with a div, which will have the same width with your containerand overflow:scroll
用 div 包裹你的桌子，它的宽度与你的container和overflow:scroll
Example: http://jsbin.com/uheha4
