设置表格单元格内容的最大高度
Posted
技术标签:
【中文标题】设置表格单元格内容的最大高度【英文标题】：Setting max-height for table cell contents 【发布时间】：2011-10-26 02:47:18 【问题描述】：我有一个表格，它应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一排应该伸展以填充可用空间。如果该行中某个单元格的内容超出了所需的高度，我希望使用 overflow:hidden 剪辑内容。
不幸的是，表和行不尊重 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>
【问题讨论】：
你能画一张简单的图片来展示你想要制作的整体布局吗？ 如果将代码粘贴到 html 页面中，您会看到它，只是表格占据了屏幕高度的 50% 以上。它应该只需要 50%。在内容标签中放置大量文本。 How to set maximum height for table-cell?的可能重复 【参考方案1】：可能不是跨浏览器，但我设法得到了这个：http://jsfiddle.net/QexkH/
基本上它需要一个固定高度的页眉和页脚。它绝对定位表格。
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;
【讨论】：
有趣的想法，我没有考虑位置：绝对。不过，它不适用于 Firefox。 这需要一个围绕表格单元格内容的包装 div：如果有可能，设置包装 div 的高度会更容易 在td里面的元素中使用“display:block”，不要使用“position: absolute”和“top, left,...”【参考方案2】：我们终于找到了某种答案。首先，问题是：表格总是围绕内容调整大小，而不是强制内容适合表格。这限制了您的选择。
我们通过将内容 div 设置为 display:none，让表格自行调整大小，然后在 javascript 中将内容 div 的高度和宽度设置为封闭 td 标记的内部高度和宽度。显示内容 div。调整窗口大小时重复此过程。
【讨论】：
@ccleve 你能不能给个 jsfiddle 工作代码。我无法完全理解你做了什么。很久以来我都面临同样的问题。【参考方案3】：只需将标签放在 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>
【讨论】：
这很容易，但是如果您无法访问 HTML，而只能访问 CSS，该怎么办？ 回答比使用大量 js 更容易。为什么在 web 编程时无法访问 html？ 我也有这个问题，就像@vsync 一样，我正在使用 Kendo UI Grid，我不能很容易地控制 HTML 在表格中的位置。我想我可以制作一个行模板或一个列模板，它们都允许我输入自己的 HTML。我可以看到其他不允许模板化的框架/系统在哪里会遇到这种情况。【参考方案4】：我发现了什么!!!，在表格中 CSS tdheight:60px; 与 CSS tdmin-height:60px; 工作方式相同
我知道细胞高度看起来很糟糕的情况。这个 javascript 解决方案不需要隐藏溢出。
使用 Javascript 限制表格中所有单元格或行的最大高度：
此脚本适用于水平溢出表。
此脚本每次将表格宽度增加 300px（最大 4000px），直到行缩小到 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';
来源：HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript
【讨论】：
【参考方案5】：我已经用这个插件解决了：http://dotdotdot.frebsite.nl/
它会自动为目标设置一个最大高度并添加三个点
【讨论】：
【参考方案6】：我在创建表格布局时遇到了同样的问题。我使用了 Joseph Marikle 的解决方案，但它也适用于 FireFox，并添加了一个表格行样式以进行良好的衡量。纯 CSS 解决方案，因为为此使用 Javascript 似乎完全没有必要和矫枉过正。
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
.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%;
如果您希望表格遵循百分比高度，则需要围绕表格进行包装，否则您可以在表格元素上设置像素高度。
【讨论】：
这不是纯 CSS 解决方案。您使用div's 复制了您的表格。
使用divs 生成 HTML 表格并不是一个好方法。有一个table 标签是有原因的，例如考虑残疾用户【参考方案7】：
另一种可能/可能不适合但肯定是最简单的解决方法：
td
display: table-caption;
【讨论】：
这个答案将受益于它的作用的描述。 嗯。将显示设置为 ahhh table-caption : 显然，但这对代码有什么影响？换句话说，为什么将显示值设置为table-caption解决了OP的问题？好的答案既可以提供解决方案，也可以提供解释。 table-caption 始终呈现在表格顶部（@media print），类似于 th，但不会在每一页上重复以上是关于设置表格单元格内容的最大高度的主要内容，如果未能解决你的问题，请参考以下文章