有没有办法将水平滚动条添加到HTML表?我实际上需要它可以垂直和水平滚动,这取决于表的增长方式,但我不能让滚动条出现。
你尝试过CSS overflow
财产吗?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
UPDATE 正如其他用户指出的那样,这还不足以添加滚动条。 所以请在下面查看并提出评论和答案。
桌子上“超过100%的宽度”真的让它对我有用。
.table-wrap {
width: 100%;
overflow: auto;
}
table {
table-layout: fixed;
width: 200%;
}
//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>
display: block
of your table然后,将overflow-x:
设为auto
。
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
干净整洁。没有多余的格式。
这是我网站页面上的more involved examples with scrolling table captions。
将表包装在DIV中,使用以下样式进行设置:
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
为此使用CSS属性“overflow”。
简短的摘要:
overflow: visible|hidden|scroll|auto|initial|inherit;
EG
table {
display: block;
overflow: scroll;
}
我遇到了同样的问题。我发现了以下解决方案,该解决方案仅在Chrome v31中进行了测试:
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
我无法获得上述任何解决方案。但是,我找到了一个黑客:
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>
这是Serge Stroobandt's答案的改进,并且完美地运作。如果表的列数较少,它解决了表格填充整页宽度的问题。
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
我在@Serge Stroobandt提出的解决方案上取得了很好的成功,但我遇到了@Shevy对单元格的问题,然后没有填充表格的整个宽度。我能够通过在tbody
中添加一些样式来解决这个问题。
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table tbody {
display: table;
width: 100%;
}
这适用于Mac上的Firefox,Chrome和Safari。
我根据previous solution and it's comment找出了这个答案并添加了一些我自己的调整。这对我在响应表上有用。
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;
}