我正在尝试设计一个有一些表格的页面。看起来样式表比它应该的要痛苦得多。
问题如下:表格应该有一个固定的高度,并在底部显示空白(当内容太少时)或垂直滚动条(当内容太多时)。除此之外,表格还有一个不应该滚动的标题。
据我所知,
thead
不滚动是表格的默认行为。拉伸的tfoot
可以很好地用于填充空白。可悲的是,似乎我可以对桌子高度施加的每一个限制都被高高兴兴地忽略了。我试过了
table {
height: 600px;
overflow: scroll;
}
我试过
max-height
。我试图绝对定位表格并给出顶部和底部坐标。我试图在 Firebug 中手动编辑高度以查看它是否是 CSS 特异性的问题。我也尝试在tbody
上设置高度。事实是,无论我如何努力,表格始终与其内容保持完全相同的高度。
当然我可以用 div 结构伪造一个表格,但它实际上是一个表格,我担心使用 div 我可能会遇到一些列可能没有正确对齐的问题。
我应该如何给桌子一个高度?
注意这个答案现在是不正确的。我可能会在稍后再回来。
正如其他人指出的那样,您不能设置表格的高度,除非您将其显示设置为block
,但随后您会得到一个滚动标题。所以你要找的是单独在
height
上设置
display:block
和
tbody
:
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
这是
小提琴.
display: block;
为
table
position: sticky; top: 0;
<table style="display: block; height: 100px; overflow: auto;">
<thead>
<tr>
<td style="position: sticky; top: 0;">Header stays put</td>
<td style="position: sticky; top: 0;">Layout aligned</td>
</tr>
</thead>
<tbody>
<tr>
<td>foo1</td>
<td>Header stays put</td>
</tr>
<tr>
<td>foo2</td>
<td>Header stays put</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/0zxk18fp/
在 Chrome、Firefox、Safari、Edge 上测试
.scroll-thead{
width: 100%;
display: inline-table;
}
.scroll-tbody-y
{
display: block;
overflow-y: scroll;
}
.table-body{
height: /*fix height here*/;
}
以下是HTML。
<table>
<thead class="scroll-thead">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody class="scroll-tbody-y table-body">
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</tbody>
</table>
is 是一种无需 js 即可完成并尊重标头的方法。然而,主要的缺点是你失去了一些语义,因为不再有真正的表头了。
基本上我将表格包裹在表格中,并通过给它一个max-height
来使用div作为滚动容器。由于我将表包装在父表中“colspanning”假标题行,它看起来好像表尊重它们,但实际上子表只有相同的行数。一个小问题,由于滚动条占用空间,子表列宽不会完全匹配。
标记
<table class="table-container">
<tbody>
<tr>
<td>header col 1</td>
<td>header col 2</td>
</tr>
<tr>
<td colspan="2">
<div class="scroll-container">
<table>
<tr>
<td>entry1</td>
<td>entry1</td>
</tr>
........ all your entries
</table>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.table-container {
border:1px solid #ccc;
border-radius: 3px;
width:50%;
}
.table-container table {
width: 100%;
}
.scroll-container{
max-height: 150px;
overflow-y: scroll;
}
table {
display: block; /* important */
height: 600px;
overflow-y: scroll;
}
div
中,然后给它一个
max-height
div
:
.scrollable-wrapper {
max-height: 400px;
overflow: auto;
}
/* Add also the following code if sticky header is wanted */
.scrollable-wrapper table thead th {
background: #afa;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<div class="scrollable-wrapper">
<table>
<thead>
<tr>
<th>Id</th>
<th>Text</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Codepen:
height:
代替
min-height:
和
使用 Javascript 限制表格中所有单元格或行的最大高度:
此脚本适用于水平溢出表。此脚本每次增加表格宽度 300px(最大 4000px)直到行缩小到 max-height(160px) ,您也可以根据需要编辑数字。
var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 160 && j < 4000) {
j += 300;
table.style.width = j + 'px';
}
}
来源:HTML Table Solution Max Height Limit For Rows or Cells By Increasing Table Width, Javascript
<div style="max-height: 400px; overflow: scroll">
<!--This is your table-->
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
</div>
HTML
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2sssssssssssssssss</td>
<td>Row 1, Cell 3</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</div>
CSS
table{
display:table;
width:100%;
table-layout: fixed;
}
thead{
position:sticky;
top:0;
}
.table-wrapper{
overflow:auto;
height:300px;
}
随意添加许多条目。
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody id="tbodyMain" style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
Javascript 部分
<script>
$(document).ready(function(){
var maxHeight = Math.max.apply(null, $("body").map(function () { return $(this).height(); }).get());
// alert(maxHeight);
var borderheight =3 ;
// Added some pixed into maxheight
// If you set border then need to add this "borderheight" to maxheight varialbe
$("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");
});
</script>