Html 设置表格单元格内容的最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7045653/
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 max-height for table cell contents
提问by ccleve
I have a table which should always occupy a certain percentage of the height of the screen. Most of the rows are of fixed height, but I have one row that should stretch to fill the available space. In the event that the contents of a cell in that row overflows the desired height, I'll like the contents to clip using overflow:hidden.
我有一张桌子，它应该总是占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一行应该伸展以填充可用空间。如果该行中单元格的内容超出了所需的高度，我会希望使用 overflow:hidden 剪辑内容。
Unfortunately, tables and rows do not respect the max-height property. (This is in the W3C spec). When there is too much text in the cell, the table gets taller, instead of sticking to the specified percentage.
不幸的是，表和行不尊重 max-height 属性。（这是在 W3C 规范中）。当单元格中有太多文本时，表格会变高，而不是坚持指定的百分比。
I can get the table cell to behave if I specify a fixed height in pixels for it, but that defeats the purpose of having it automatically stretch to fill available space.
如果我为它指定一个固定的高度（以像素为单位），我可以让表格单元格运行起来，但这违背了让它自动拉伸以填充可用空间的目的。
I've tried using divs, but can't seem to find the magic formula. If I use divs with display:table, :table-row, and :table-cell the divs act just like a table.
我试过使用 div，但似乎找不到神奇的公式。如果我将 div 与 display:table、:table-row 和 :table-cell 一起使用，则 div 的作用就像一个表格。
Any clues on how I can simulate a max-height property on a table?
关于如何模拟桌子上的最大高度属性的任何线索？
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
采纳答案by ccleve
We finally found an answer of sorts. First, the problem: the table always sizes itself around the content, rather than forcing the content to fit in the table. That limits your options.
我们终于找到了各种各样的答案。首先，问题：表格总是围绕内容调整自己的大小，而不是强制内容适合表格。这限制了你的选择。
We did it by setting the content div to display:none, letting the table size itself, and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag. Show the content div. Repeat the process when the window is resized.
我们通过将内容 div 设置为 display:none 来实现，让表格自己调整大小，然后在 javascript 中将内容 div 的高度和宽度设置为封闭 td 标签的内部高度和宽度。显示内容div。调整窗口大小时重复该过程。
回答by keithics
Just put the labels in a div inside the TD and put the height and overflow.. like below.
只需将标签放在 TD 内的 div 中，然后放置高度和溢出.. 如下所示。
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
回答by cellen
I had the same problem with a table layout I was creating. I used Joseph Marikle's solution but made it work for FireFox as well, and added a table-row style for good measure. Pure CSS solution since using Javascript for this seems completely unnecessary and overkill.
我在创建的表格布局中遇到了同样的问题。我使用了 Joseph Marikle 的解决方案，但它也适用于 FireFox，并添加了一个表格行样式以获得良好的度量。纯 CSS 解决方案，因为为此使用 Javascript 似乎完全没有必要而且矫枉过正。
html
html
<div class='wrapper'>
<div class='table'>
<div class='table-row'>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
<div class='cell-wrap'>
lots of content here
</div>
</div>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
content here
</div>
</div>
</div>
</div>
css
css
.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
You need a wrapper around the table if you want the table to respect a percentage height, otherwise you can just set a pixel height on the table element.
如果您希望表格遵循百分比高度，则需要在表格周围进行包装，否则您只需在表格元素上设置像素高度即可。
回答by Joseph Marikle
Possibly not cross browser but I managed get this: http://jsfiddle.net/QexkH/
可能不是跨浏览器，但我设法得到了这个：http: //jsfiddle.net/QexkH/
basically it requires a fixed height header and footer. and it absolute positions the table.
基本上它需要一个固定高度的页眉和页脚。它绝对定位表格。
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 Mr. Rick
What I found !!!, In tables CSS td{height:60px;}works same as CSS td{min-height:60px;}
我发现了什么！！！，在表格中 CSS 的td{height:60px;}工作方式与 CSS 相同td{min-height:60px;}
I know that situation when cells height looks bad . This javascript solution don't need overflow hidden.
我知道当单元格高度看起来很糟糕时的情况。这个 javascript 解决方案不需要隐藏溢出。
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 Francesco Borzi
I've solved just using this plugin: http://dotdotdot.frebsite.nl/
我只使用这个插件就解决了：http: //dotdotdot.frebsite.nl/
it automatically sets a max height to the target and adds three dots
它会自动为目标设置最大高度并添加三个点
回答by zak
Another way around it that may/may not suit but surely the simplest:
另一种可能/可能不适合但肯定是最简单的解决方法：
td {
display: table-caption;
}
