设置表格单元格内容的最大高度 [英] Setting max-height for table cell contents
问题描述
我有一个表格应该总是占据屏幕高度的一定百分比。大多数行都是固定高度，但我有一行应该伸展来填充可用空间。如果该行中的单元格的内容溢出所需的高度，我会喜欢内容使用overflow：hidden。clip;
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.
不幸的是，表和行不要遵守max-height属性。 （这是在W3C规范）。当单元格中有太多的文本时，表格变得更高，而不是坚持指定的百分比。
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.
我可以得到表格单元格的行为，如果我指定
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.
我已经尝试使用divs，但似乎不能使用divs，找到魔术公式。如果我使用divs与display：table：：table-row和：table-cell，divs就像一个表。
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.
任何有关如何模拟max-height属性？
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>
推荐答案
我们终于找到了一个答案。首先，问题：表始终围绕内容大小自身，而不是强制内容适合表中。这限制了您的选择。
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.
我们通过设置content div来显示：none，让表格大小本身，然后在javascript设置的高度和宽度内容div到封闭td标签的内部高度和宽度。显示内容div。在调整窗口大小时重复此过程。
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.
这篇关于设置表格单元格内容的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
