Html 如何设置表格单元格的最大高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13667941/
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 to set maximum height for table-cell?
提问by skyisred
I got a table-cell with fixed width and height and if text is too large, cell size should remain the same and text should be hidden by overflow:hidden.
我有一个固定宽度和高度的表格单元格，如果文本太大，单元格大小应该保持不变，文本应该被溢出隐藏：隐藏。
div {
display: table-cell
height: 100px;
width: 100px;
overflow: hidden;
vertical-align: middle;
}
Table-cell, however, expands beyond 100px if too much text is added. Any tricks to prevent it from expanding?
但是，如果添加太多文本，表格单元格会扩展到 100 像素以上。有什么技巧可以防止它扩大？
Text should be several lines in length, so "white-space:nowrap" solution is not applicable
文本长度应为几行，因此“white-space:nowrap”解决方案不适用
回答by Jukka K. Korpela
By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. Thus, you need to restrict the height indirectly using inner markup, normally a divelement (<td><div>content</div></td>), and set heightand overflowproperties on the the divelement (without setting display: table-cellon it, of course, as that would make its height obey CSS 2.1 table cell rules).
根据CSS 2.1 规则，表格单元格的高度是“内容所需的最小高度”。因此，您需要使用内部标记间接限制高度，通常是一个div元素 ( <td><div>content</div></td>)，并在元素上设置height和overflow属性div（display: table-cell当然，不设置它，因为这会使它的高度遵守 CSS 2.1 表格单元格规则）。
回答by beipawel
I don't think that the accepted answer actually fully solves the problem. You wanted to have a vertical-align: middleon the table-cells content. But when you add a div inside the table-cell and give it a height the content of that inner DIV will be at the top.
Check this jsfiddle. The overflow:hidden; works fine, but if you shorten the content so that it's only one line, this line won't be centered vertically
我不认为接受的答案实际上完全解决了问题。你想vertical-align: middle在表格单元格内容上有一个。但是，当您在表格单元格内添加一个 div 并为其指定高度时，该内部 DIV 的内容将位于顶部。检查这个jsfiddle。溢出：隐藏；工作正常，但如果您缩短内容使其只有一行，则该行不会垂直居中
The solution is not to add a DIV inside the table-cell but rather outside. Here's the Code:
解决方案不是在表格单元格内部添加 DIV，而是在外部添加 DIV。这是代码：
/* some wrapper */
div.d0 {
background: grey;
width:200px;
height: 200px;
}
div.table {
margin: 0 auto; /* just cosmetics */
width: 150px;
height: 150px;
background: #eee;
display: table;
}
div.tablecell {
display: table-cell;
vertical-align: middle;
text-align:center;
height: 100%;
width: 100%;
background: #aaa;
}
div.outer-div {
height: 150px;
overflow: hidden;
}<div class="d0">
<div class="outer-div">
<div class="table">
<div class="tablecell">
Lorem ipsum
<!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
</div>
</div>
</div>
</div> 回答by Itamar
You can do either of the following:
您可以执行以下任一操作：
Use css attribute "line-height" and set it per table row (), this will also vertically center the content within
Set "display" css attribute to "block" and as the following:
使用 css 属性“line-height”并将其设置为每个表格行 ()，这也会使内容垂直居中
将“display” css 属性设置为“block”，如下所示：
td
{
display: block;
overflow-y: hidden;
max-height: 20px;
}
good luck!
祝你好运！
回答by Mr. Rick
In css you can't set table-cells max height, and if you white-space nowrap then you can't break it with max width, so the solution is javascript working in all browsers.
在 css 中，你不能设置表格单元格的最大高度，如果你用空格 nowrap 那么你不能用最大宽度打破它，所以解决方案是在所有浏览器中工作的 javascript。
So, this can work for you.
所以，这对你有用。
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 Rahul Tripathi
Try something like this:-
尝试这样的事情：-
table {
width: 50%;
height: 50%;
border-spacing: 0;
position:absolute;
}
td {
border: 1px solid black;
}
#content {
position:absolute;
width:100%;
left:0px;
top:20px;
bottom:20px;
overflow: hidden;
}
回答by Rups
Use the style below:
使用以下样式：
div {
display: fixed;
max-height: 100px;
max-width: 100px;
overflow: hidden;
}
With the HTML being:
使用 HTML 是：
<div>
your long text here
</div>
回答by ahmed
if you are using display:table-cell, max-height will not work for div of this style. so the solution which worked for me is to set the max height of inner div
如果您使用 display:table-cell，max-height 不适用于这种样式的 div。所以对我有用的解决方案是设置内部 div 的最大高度
<div class="outer_div" style="display:table">
<div class="inner_div" style="display:table-cell">
<img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
</div>
<div class="inner_div" style="display:table-cell">
<img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
</div>
</div>
回答by vels4j
Try
尝试
<td style="word-wrap: break-word">Long text here</td>
回答by Jarett Lloyd
Might this fit your needs?
这可能符合您的需求吗？
<style>
.scrollable {
overflow-x: hidden;
overflow-y: hidden;
height: 123px;
max-height: 123px;
}
</style>
<table border=0><tr><td>
A constricted table cell
</td><td align=right width=50%>
By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
<hr>
you CAN restrict the height of a table cell, so long as the contents are<br>
encapsulated by a `<div>`<br>
i am unable to get horizontal scroll to work.<br>
long lines cause the table to widen.<br>
tested only in google chrome due to sheer laziness - JK!!<br>
most browsers will likely render this as expected<br>
i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
<div class=scrollable style="height: 100%; width: 100%;" valign=top>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
is this suitable??<br>
</div>
回答by Ed Heal
This is what you want:
这就是你想要的：
td {
max-height: whatever;
max-width: whatever;
overflow: hidden;
}
