如何指定表的高度，以便出现一个垂直滚动条？

我的页面上有一个包含许多行的表。我想设置表的高度，例如500px，这样，如果表的高度大于这一点，将出现一个垂直滚动条。我尝试在 table上使用 CSS height属性，但是它不起作用。

241226 次浏览
小开

You need to wrap the table inside another element and set the height of that element. Example with inline css:

<div style="height: 500px; overflow: auto;">
<table>
</table>
</div>
小开
最佳答案

尝试使用 overflow CSS 属性。还有单独的属性来定义水平溢出(overflow-x)和垂直溢出(overflow-y)的行为。

因为你只想要垂直滚动，试试这个:

table {
height: 500px;
overflow-y: scroll;
}

编辑:

显然，<table>元素不尊重 overflow属性。这似乎是因为 <table>元素在默认情况下没有呈现为 display: block(它们实际上有自己的显示类型)。您可以通过将 <table>元素设置为块类型来强制 overflow属性工作:

table {
display: block;
height: 500px;
overflow-y: scroll;
}

注意，这将导致元素具有100% 的宽度，所以如果您不希望它占据包含元素的整个水平宽度，您还需要为元素指定一个显式宽度。

小开

要设置表的高度，首先需要设置 css 属性“ display: block” 然后你可以添加“宽度/高度”属性。我发现这篇 Mozilla 文章是学习如何设计表格样式的一个很好的资源: 林克

小开

这个 CSS 还显示了一个固定高度的 HTML 表。它将 HTML tbody 的高度设置为400像素，当它变大时，HTML tbody 会滚动，将 HTML 头保留为非滚动元素。

此外，标题中的每个单元格和每个 td 单元格的主体应该按照所需的固定宽度设计样式。

#the-table {
display: block;
background: white; /* optional */
}


#the-table thead {
text-align: left; /* optional */
}


#the-table tbody {
display: block;
max-height: 400px;
overflow-y: scroll;
}
小开

这些解决方案都不管用，但是，我抓住了 Bootstrap 的灵活解决方案，它起作用了

table, td {
border: 1px solid black;
}
th {
border-left: 1px solid black;
}


table {
border-collapse: collapse;
width: 100%;
}


table {
display: flex;
flex-flow: column;
width: 100%;
height: 400px;
    

}


thead {
padding-right: 13px;
flex: 0 0 auto;
}


tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}


tr {
width: 100%;
display: table;
table-layout: fixed;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</tbody>
</table>


提交答案