Html 如何使表格可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12597897/
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
How do I make a table scrollable
提问by Martin Kristiansen
Does anyone know a vanilla way of making the body of a table scrollable using only html and css?
有谁知道一种仅使用 html 和 css 使表格主体可滚动的香草方法？
The obvious solution
显而易见的解决方案
tbody {
height: 200px;
overflow-y: scroll;
}
does not work.
不起作用。
Wouldnt this be the obvious use of tables?
这不是表格的明显用途吗？
am I doing something wrong?
难道我做错了什么？
回答by Christoph
You need to declare a height first, else your table will expand to the according with of it's content.
您需要先声明高度，否则您的表格将根据其内容展开。
table{
overflow-y:scroll;
height:100px;
display:block;
}
EDIT: after clarifying your problem i edited the fiddle: check out this Exampleor that way. It's rather hacky and not quaranteed to work crossbrowser but might work for your case.
回答by scoota269
You can't do that with a table. Wrap the table with a div a give it something like:
你不能用一张桌子做到这一点。用 div 包裹桌子，给它一些类似的东西：
div.wrapper {
overflow:hidden;
overflow-y: scroll;
height: 100px; // change this to desired height
}
回答by David Ben Dahan
You can wrap the table with a parent divand make him scrollable as scoota269advised:
您可以使用父级将表包裹起来，div并按照scoota269 的建议使其可滚动：
.div_before_table {
overflow:hidden;
overflow-y: scroll;
height: 500px;
}
And to keep the table header stickyyou can add a fixedclass:
为了保持表格标题的粘性，您可以添加一个fixed类：
.th.fixed {
top: 0;
z-index: 2;
position: sticky;
background-color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #ddd;
}
/* The scrollable part */
.scrollable {
height: 150px;
overflow-y: scroll;
border-bottom: 1px solid #ddd;
}
th {
position: sticky;
background-color: white;
z-index: 2;
top: 0;
}<div class="scrollable">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>回答by RMN
Do you want somthing like this ?
你想要这样的东西吗？
Pure CSS Scrollable Table with Fixed Header (1)
带有固定标题的纯 CSS 可滚动表 (1)
http://anaturb.net/csstips/sheader.htm
http://anaturb.net/csstips/sheader.htm
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
