小开

最佳答案

你试过CSS overflow属性吗?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

< p > 更新 < br > 正如其他用户指出的那样，这还不够来添加滚动条所以，请参阅下面的评论和答案，并为其投票

小开

使用CSS属性“溢出"对于这个。

简短的总结:

overflow: visible|hidden|scroll|auto|initial|inherit;

如。

table {
overflow: scroll;
}

小开

用下面的样式将表格包装成DIV:

div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}

小开

我也遇到了同样的问题。我发现了下面的解决方案，它只在Chrome v31中测试过:

table {
table-layout: fixed;
}


tbody {
display: block;
overflow: scroll;
}

小开

首先，创建表的`display: block`

然后，将overflow-x:设置为auto。

table {
display: block;
overflow-x: auto;
white-space: nowrap;
}

又好又干净。没有多余的格式。

这里是更多涉及滚动表标题的示例从我的网站上的一个页面。

如果一个关于单元格没有填充整个表的问题，附加以下额外的CSS代码:

table tbody {
display: table;
width: 100%;
}

小开

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>


//Css to make Horizontal Dropdown


<style>


.search-table{table-layout: auto; margin:40px auto 0px auto; }
.search-table, td, th {
border-collapse: collapse;
}
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }




</style>

小开

我不能让上面的任何解决方案工作。然而，我发现了一个黑客:

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>

小开

我根据以前的解决方案和它的评论计算出了这个答案，并添加了一些我自己的调整。这在响应式桌子上很适合我。

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;
}

小开

这是哔叽Stroobandt的答案的改进，工作完美。它解决了表没有填充整个页面宽度的问题，如果它有较少的列。

<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>


<div class="table_wrapper">
<table>
...
</table>
</div>

小开

Edit: @WickyNilliams注意到，在表体上设置display: block将剥夺表的语义，因此由于可访问性问题，这不是一个很好的解决方案。

我对@Serge Stroobandt提出的解决方案取得了很好的成功，但我遇到了@Shevy的问题，这些单元格没有填满表的全宽度。我能够通过向tbody添加一些样式来修复这个问题。

table {
display: block;
overflow-x: auto;
white-space: nowrap;
}


table tbody {
display: table;
width: 100%;
}

我在Mac上的火狐、Chrome和Safari浏览器上都能使用这种方法。

小开

桌子上“超过100%的宽度”真的很适合我。

.table-wrap {
width: 100%;
overflow: auto;
}


table {
table-layout: fixed;
width: 200%;
}

小开

将表格插入到div中，这样表格就会有完整的长度

超文本标记语言

<div class="scroll">
<table>  </table>
</div>

CSS

.scroll{
overflow-x: auto;
white-space: nowrap;
}

小开

与引导

 <div class="table-responsive">
<table class="table">
...
</table>
</div>

小开

不管怎样，我找到的最好答案是: https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574 < / p >

table.tablesaw
{
table-layout: fixed;
max-width: none;
width: auto;
min-width: 100%;
}

小开

我尝试了以上所有的解决方案，但都有一些问题。

如果我们将display: 'block'添加到表中，单元格不会占用全宽度。如果我们把它添加到表包装器中，你的自定义表头，如搜索，过滤器等也会滚动，这看起来很糟糕

我能够通过将overflow-x: auto添加到表的主体包装器来实现预期的行为。

单元格采用全宽度，即使列较少，滚动条也会根据需要自动出现。

小开

为div元素添加标签表，style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
<thead>
<tr>
<th><b>Name</b></th>
<th><b>Username</b></th>
<th><b>Email</b></th>
<th><b>Avatar</b></th>
<th><b>Status</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>

小开

如前所述，在表上使用display:block;是不好的。我尝试了这个帖子中的大多数答案，没有一个像我想要的那样有效。如果你的HTML是这样结构的:

<div>
<table>
<tbody>

你想让父div水平滚动，你可以试试下面的方法:

.text-left {text-align:left;} /* Ignore */


.x-auto {
overflow-x: auto;
}


.table {
text-align: left;
table-layout: fixed;
width: 100%;
white-space: nowrap;
}


.table tbody {
display: table;
width: 100%;
}

<div class="x-auto">
<table class="table text-left">
<tbody>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
<tr>
<td>Some short text!</td>
<td>Some really long text, like really really really really really really really really really really really really long!</td>
</tr>
</tbody>
</table>
</div>

小开

这对我来说很管用

.wrapper {
overflow-x: auto;
white-space: nowrap;
}


.wrapper table {
width: auto;
min-width: 100%;
}


<div class="wrapper">
<table>...</table>
</div>

小开

.wrapper {
width: 0;
min-width: 100%; //width 0, but min-width 100?? yes, I know...
overflow: auto;
}

<div class="wrapper">
<table></table>
</div>

table可以有任意的width。我通常使用100%或max-content作为表。

小开

这解决方案似乎有点过头了。最简洁的方法是像这样用div来包装:

<div style="overflow-x:auto;">
<table>
...
</table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

向HTML表中添加水平滚动条

首先，创建表的display: block

首先，创建表的`display: block`