我有一张桌子，它应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一行应该拉伸以填充可用空间。如果该行中单元格的内容溢出所需的高度，我希望使用溢出：隐藏来剪辑内容。
不幸的是，表和行不遵守 max-height 属性。 （这是 W3C 规范中的内容）。当单元格中的文本过多时，表格会变高，而不是坚持指定的百分比。
如果我为其指定固定高度（以像素为单位），我可以让表格单元格正常工作，但这违背了让它自动拉伸以填充可用空间的目的。
我尝试过使用 div，但似乎找不到神奇的公式。如果我将 div 与 display:table、:table-row 和 :table-cell 一起使用，则 div 的作用就像表格一样。
关于如何模拟桌子上的最大高度属性有任何线索吗？
<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>
只需将标签放入 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
