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

Question

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

我有一张桌子应该总是占据屏幕高度的一定百分比.大多数行都是固定高度的,但是我有一行应该伸展以填充可用空间.如果该行中单元格的内容溢出所需高度,我将使用overflow:hidden来剪切内容.

不幸的是,表和行不遵循max-height属性.(这是在W3C规范中).当单元格中的文本太多时,表格会变高,而不是坚持指定的百分比.

如果我为它指定一个固定的高度(以像素为单位),我可以让表格单元格表现出来,但这会使其自动拉伸以填充可用空间的目的失败.

我尝试过使用div,但似乎无法找到神奇的公式.如果我使用带有display:table,:table-row和:table-cell的div,则div就像表一样.

有关如何在表格上模拟max-height属性的任何线索？

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kei*_*ics 55

只需将标签放在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>

Run Code Online (Sandbox Code Playgroud)

这是一个简单的部分,但如果您无法访问HTML,只能访问CSS,该怎么办？ (7认同)
回答它比使用大量的j更容易.为什么在为网络编程时你不能访问html？ (3认同)
我也有这个问题，就像@vsync一样，我正在使用Kendo UI Grid，但我无法很容易地控制表中显示的HTML内容。我想我可以制作一个行模板或列模板，它们都允许我输入自己的 HTML。我可以看到在其他不允许模板的框架/系统中您可能会遇到这种情况。 (2认同)

Answer 2

ccl*_*eve 15

我们终于找到了各种答案.首先,问题是:表总是围绕内容调整大小,而不是强制内容适合表.这限制了你的选择.

我们通过将content div设置为display:none,让表大小本身,然后在javascript中将内容div的高度和宽度设置为封闭的td标记的内部高度和宽度来实现.显示内容div.调整窗口大小时重复此过程.

@ccleve 能否请您提供一个 jsfiddle 工作代码。我无法完全理解你做了什么。很长一段时间以来，我都面临着同样的问题。 (2认同)

归档时间：	14 年，6 月前
查看次数：	95880 次
最近记录：	7 年，1 月前