Html 表中的最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20293492/
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
Max-Height in Html Table
提问by user2097810
I create a table, and I want it's heightbe 800px.
我创建了一个表，我希望它height是800px.
If it's overflow, I want to make Scroll Bar but the Titles does not scroll.
如果它溢出，我想制作滚动条但标题不滚动。
So I try to add this CSS:
所以我尝试添加这个 CSS：
overflow: scroll;
max-height:800px;
But it's not work for me. This is the entire html file. What is the problem?
但这对我不起作用。这是整个 html 文件。问题是什么？
CSS
CSS
table{
overflow: scroll;
text-align: center;
margin: auto;
max-height:800px;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
And HTML
和 HTML
<table >
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
<tr>
<td>3534534</td>
<td>??"?</td>
<td>6,463</td>
<td>4,000</td>
</tr>
<tr>
<td>3534534</td>
<td>??"?</td>
<td>6,463</td>
<td>4,000</td>
</tr>
</table>
Thanks!!!
谢谢！！！
回答by Olaf Dietsche
You can wrap the table in a div and give the max-heightand overflow: scrollto that div
你可以用表在一个div并给予max-height与overflow: scroll该DIV
<div class="pane">
<table>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
<tr>
<td>3534534</td>
<td>??"?</td>
<td>6,463</td>
<td>4,000</td>
</tr>
...
</table>
</div>
.pane {
display: inline-block;
overflow-y: scroll;
max-height:200px;
}
table {
text-align: center;
margin: auto;
}
There's another solution at Pure CSS Scrollable Table with Fixed Headerwithout a wrapper div, but with an additional theadand tbodyaround the rows. You set the thead and tbody to display: blockand give a max-heightand overflow-yto the tbody. This lets the header stay in place when scrolling the rows. But as always, it comes with a price tag. You have to specify the column widths, because the thead and tbody are out of sync due to the display: block
还有另一个解决方案纯CSS滚动表头固定不带包装的div，但有一个附加的thead和tbody周围的行。您将 thead 和 tbody 设置为display: block并给tbody一个max-height和overflow-y。这让标题在滚动行时保持原位。但与往常一样，它带有价格标签。您必须指定列宽，因为 thead 和 tbody 由于display: block
<table>
<thead>
<tr>
<th>field a</th>
<th>field b</th>
<th>field c</th>
<th>field e</th>
</tr>
</thead>
<tbody>
<tr>
<td>3534534</td>
<td>??"?</td>
<td>6,463</td>
<td>4,000</td>
</tr>
...
</tbody>
</table>
thead {
display: block;
}
tbody {
display: block;
overflow-y: scroll;
max-height:200px;
}
thead th, tbody td {
width: 70px;
}
Update:
更新：
In the source code of that site, there are comments about IE and IE6. It sets
在那个站点的源代码中，有关于IE和IE6的评论。它设置
thead tr {
position: relative
}
and defines the width of the table with
并定义表格的宽度
table {
float: left;
width: 740px
}
Wheter this is relevant for IE10, I don't know.
这是否与 IE10 相关，我不知道。
回答by Maloke
Use another element to wrap the whole table, and give those properties to him:
使用另一个元素来包装整个表格，并将这些属性提供给他：
#table-limiter {
max-height:800px;
overflow: scroll;
}
HTML example:
HTML 示例：
<div id="table-limiter">
<table>
...
</table>
</div>
Styling table is, sometimes, a trouble :(
样式表有时是一个麻烦:(
回答by whaleofawash
Here's one approach.
这是一种方法。
Add a wrapping div with CSS:
使用 CSS 添加一个包装 div：
#set-height {
display: inline-block;
height:800px;
overflow: scroll;
}
Fiddle: http://jsfiddle.net/JmLFz/
回答by user1078385
Wrap the table in a div tag and set the height of the div to 800px with an overflow set to auto.
将表格包裹在 div 标签中，并将 div 的高度设置为 800 像素，并将溢出设置为自动。
<div style="height:800px; overflow:auto;">
//Table goes here
</div>
Then if your table height is more than 800px a scroll bar will appear in the div and allow you to scroll through the table.
然后，如果您的表格高度超过 800 像素，div 中将出现一个滚动条，并允许您滚动表格。
