设置表格单元格内容的最大高度答案

【问题标题】：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?的可能重复

标签： html css html-table

【解决方案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 td{height:60px;} 与 CSS td{min-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，但不会在每一页上重复