添加水平滚动条到html表格

有没有办法将一个水平滚动条添加到HTML表格？ 我实际上需要它可以垂直和水平滚动取决于如何增长表，但我不能让滚动条出现。

Answer 1

你有没有尝试CSS overflow属性？

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

UPDATE
正如其他用户指出， 这是不够的添加滚动条。
所以，请看下面的评论和回答。

Answer 2

首先，做一个display: block你的桌子的display: block

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

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

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

这里有更多涉及我的网站页面滚动表标题的例子 。

Answer 3

将表格包装在DIV中，使用以下样式进行设置：

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

Answer 4

为此，使用CSS属性“ 溢出 ”。

简短的摘要：

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

例如

 table { display: block; overflow: scroll; } 

Answer 5

我遇到了同样的问题。 我发现了以下解决scheme，它只在Chrome v31中testing过：

 table { table-layout: fixed; } tbody { display: block; overflow: scroll; } 

Answer 6

 //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>