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>

Answer 1

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

Answer 2

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

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

Answer 3

我在创建表格布局时遇到了同样的问题。我使用了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%;}

如果您希望表格尊重百分比高度，则需要在表格周围使用包装器，否则您只需在表格元素上设置像素高度。

Answer 4

可能没有跨浏览器，但我管理得到这个：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;
    }

Answer 5

我找到了!!!，在表格中，CSS td{height:60px;}与CSS td{min-height:60px;}

的作用相同

我知道细胞高度看起来很糟糕的情况。这个javascript解决方案不需要隐藏溢出。

使用Javascript限制表格中所有单元格或行的最大高度：

此脚本适用于水平溢出表。

此脚本每次增加表格宽度300px（最大4000px），直到行缩小到最大高度（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

Answer 6

围绕它的另一种方式可能/可能不适合但肯定是最简单的：

td {
    display: table-caption;
}

Answer 7

我已经解决了使用此插件的问题：http://dotdotdot.frebsite.nl/

它会自动为目标设置最大高度并添加三个点

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

7 个答案: