将水平滚动条添加到 html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5533636/
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
Add horizontal scrollbar to html table
提问by Tsundoku
Is there a way to add a Horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I can't get either scrollbar to appear.
有没有办法将水平滚动条添加到 HTML 表格？我实际上需要它可以垂直和水平滚动，具体取决于表格的增长方式，但我无法显示任何一个滚动条。
采纳答案by pasine
Did you try CSS overflowproperty?
您是否尝试过 CSSoverflow属性？
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
UPDATE
As other users are pointing out, this is not enoughto add the scrollbars.
So please, see and upvote comments and answers below.
更新
正如其他用户所指出的，这不足以添加滚动条。
因此，请查看并支持下面的评论和答案。
回答by Serge Stroobandt
First, make a display: blockof your table
首先，制作一张display: block你的桌子
then, set overflow-x:to auto.
然后，设置overflow-x:为auto。
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
Nice and clean. No superfluous formatting.
漂亮干净。没有多余的格式。
Here are more involved examples with scrolling table captionsfrom a page on my website.
以下是我网站页面上更多涉及滚动表格标题的示例。
回答by Colin M
Wrap the table in a DIV, set with the following style:
将表格包裹在 DIV 中，设置为以下样式：
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
回答by Roger Willcocks
回答by ochomoswill
This is an improvement of Serge Stroobandt'sanswer and works perfectly. It solves the issue of the table not filling the whole page width if it has less columns.
这是Serge Stroobandt答案的改进，并且效果很好。它解决了表格列数较少时无法填满整个页面宽度的问题。
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
回答by Mary7678
I had good success with the solution proposed by @Serge Stroobandt, but I encountered the problem @Shevy had with the cells then not filling the full width of the table. I was able to fix this by adding some styles to the tbody.
我在@Serge Stroobandt 提出的解决方案上取得了很好的成功，但我遇到了@Shevy 的问题，即单元格没有填满表格的整个宽度。我能够通过向tbody.
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table tbody {
display: table;
width: 100%;
}
This worked for me in Firefox, Chrome, and Safari on Mac.
这在 Mac 上的 Firefox、Chrome 和 Safari 中对我有用。
回答by Josh
I was running into the same issue. I discovered the following solution, which has only been tested in Chrome v31:
我遇到了同样的问题。我发现了以下解决方案，该解决方案仅在 Chrome v31 中进行过测试：
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
回答by mpen
I couldn't get any of the above solutions to work. However, I found a hack:
我无法使上述任何解决方案起作用。但是，我发现了一个黑客：
body {
background-color: #ccc;
}
.container {
width: 300px;
background-color: white;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
display: table;
table-layout: fixed;
width: 100%;
}
.hack2 {
display: table-cell;
overflow-x: auto;
width: 100%;
}<div class="container">
<div class="hack1">
<div class="hack2">
<table>
<tr>
<td>table or other arbitrary content</td>
<td>that will cause your page to stretch</td>
</tr>
<tr>
<td>uncontrollably</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
</div>
</div>
</div>回答by George
I figured out this answer based on previous solution and it's commentand added some adjustments of my own. This works for me on the responsive table.
我根据以前的解决方案和它的评论找出了这个答案，并添加了我自己的一些调整。这在响应式桌子上对我有用。
table {
display: inline-block;
overflow-x: auto;
white-space: nowrap;
// make fixed table width effected by overflow-x
max-width: 100%;
// hide all borders that make rows not filled with the table width
border: 0;
}
// add missing borders
table td {
border: 1px solid;
}
回答by Peps
The 'more than 100% width' on the table really made it work for me.
桌子上的“超过 100% 的宽度”真的很适合我。
.table-wrap {
width: 100%;
overflow: auto;
}
table {
table-layout: fixed;
width: 200%;
}