Html 在桌子上设置最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8970362/
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
Setting a max height on a table
提问by Andrea
I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.
我正在尝试设计一个页面，其中有一些表格。看起来样式表比它应该的要痛苦得多。
The problem is the following: The tables should have a fixed height and display either white space at the bottom (when there is too little content) or a vertical scrollbar (when there is too much). Add to this that the tables have a header which should not scroll.
问题如下：表格应该有固定的高度并在底部显示空白（内容太少时）或垂直滚动条（内容太多时）。除此之外，表格有一个不应滚动的标题。
As far as I know, the theadnot scrolling is the default behaviour for tables. And a stretching tfootcould serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried
据我所知，thead不滚动是表格的默认行为。拉伸tfoot可以很好地用于填充空白区域。可悲的是，似乎我可以对桌子高度施加的每一个限制都被愉快地忽略了。我试过了
table {
height: 600px;
overflow: scroll;
}
I have tried with max-height. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the tbodytoo. Fact is, the table always stays exactly the same height as its content, regardless of my efforts.
我已经尝试过max-height。我试图绝对定位表格并给出顶部和底部坐标。我尝试在 Firebug 中手动编辑高度以查看是否是 CSS 特异性的问题。我也尝试过设置高度tbody。事实是，无论我如何努力，桌子始终保持与其内容完全相同的高度。
Of course I could fake a table with a div structure, but it actually isa table, and I fear using divs I may run into an issue where some columns may not be properly aligned.
当然，我可以伪造一个带有 div 结构的表，但它实际上是一个表，我担心使用 div 我可能会遇到一些列可能没有正确对齐的问题。
How am I supposed to give a table a height?
我应该如何给桌子一个高度？
采纳答案by Dan Dascalescu
NOTEthis answer is now incorrect. I may get back to it at a later time.
注意这个答案现在是不正确的。稍后我可能会回到它。
As others have pointed out, you can't set the height of a tableunless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the heightand display:blockon the tbodyalone:
正如其他人指出的那样，除非您将其显示设置为，否则您无法设置表格的高度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>
Here's the fiddle.
这是小提琴。
回答by Scott
Add display:block;to the table's css. (in other words.. tell the table to act like a block element rather than a table.)
添加display:block;到表的css。（换句话说……告诉表格像块元素而不是表格一样。）
回答by Sibi John
You can do this by using the following css.
您可以使用以下 css 来完成此操作。
.scroll-thead{
width: 100%;
display: inline-table;
}
.scroll-tbody-y
{
display: block;
overflow-y: scroll;
}
.table-body{
height: /*fix height here*/;
}
Following is the HTML.
以下是 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>
回答by Loktar
I had a coworker ask how to do this today, and this is what I came up with. I don't love it but it isa way to do it without js and have headers respected. The main drawback however is you lose some semantics due to not having a true table header anymore.
我今天有一个同事问如何做到这一点，这就是我想出的。我不喜欢它，但它是一种无需 js 并且尊重标头的方法。然而，主要的缺点是你失去了一些语义，因为不再有真正的表头。
Basically I wrap a table within a table, and use a div as the scroll container by giving it a max-height. Since I wrap the table in a parent table "colspanning" the fake header rows it appears as if the table respects them, but in reality the child table just has the same number of rows.
基本上我将一个表包裹在一个表中，并通过给它一个 .div 来使用一个 div 作为滚动容器max-height。由于我将表包装在一个父表中“colspanning”假标题行，它看起来好像表尊重它们，但实际上子表只有相同的行数。
One small issue due to the scroll bar taking up space the child table column widths wont match up exactly.
由于滚动条占用空间，子表列宽不会完全匹配，因此存在一个小问题。
Markup
标记
<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
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;
}
回答by Wesley
回答by Mr. Rick
In Tables, For minimum table cells height or rows height use css height:in place of min-height:
在表格中，对于最小表格单元格高度或行高，使用 cssheight:代替min-height:
AND
和
For Limiting max-height of all cells or rows in table with Javascript:
使用 Javascript 限制表格中所有单元格或行的最大高度：
This script is good for horizontal overflow tables.
此脚本适用于水平溢出表。
This script increase the table width 300px each time (maximum 4000px) until rows shrinks to max-height(160px) , and you can also edit numbers as your need.
此脚本每次将表格宽度增加 300 像素（最大 4000 像素），直到行缩小到 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';
}
}
Source: HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript
回答by Beefjeff
Use divs with max height and min height around the content that needs to scroll.
在需要滚动的内容周围使用具有最大高度和最小高度的 div。
<tr>
<td>
<div>content</div>
</td>
</tr>
td div{
max-height:20px;
}
回答by user1124809
- Set
display: block;for thetable - Set
position: sticky; top: 0;for the header row
- 设置
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/
https://jsfiddle.net/0zxk18fp/
Tested on Chrome, Firefox, Safari, Edge
在 Chrome、Firefox、Safari、Edge 上测试
回答by Abhishek B.
<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 Section
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>
please, refer How to set maximum possible height to your Table Body
Fiddle Here
