关于html：设置表格单元格内容的最大高度


Setting max-height for table cell contents

我有一张桌子，应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一排应该伸展以填充可用空间。万一该行中单元格的内容超出了所需的高度，我希望使用overflow：hidden剪切内容。

不幸的是，表和行不遵守max-height属性。 (这在W3C规范中)。当单元格中的文本过多时，表格将变高，而不是坚持指定的百分比。

如果我为其指定一个固定的高度(以像素为单位)，则可以使表格单元格表现出来，但这违背了将其自动拉伸以填充可用空间的目的。

我试过使用div，但似乎找不到魔术公式。如果我将div与display：table，：table-row和：table-cell一起使用，则div的作用就像一个表。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
       
            put lots of text here
       
        </td>
        <tr>
    <tr class="headfoot"><td>footer</td></tr>
</table>
</body>
相关讨论

只需将标签放在TD内的div中，然后将高度和溢出量..如下所示。

1
2
3
4
5
6
7
<table>
<tr>
  <td>Sample</td>
  <td>Text</td>
  <td>Here</td>
</tr>
</table>
相关讨论

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

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

相关讨论

我在创建表布局时遇到了同样的问题。我使用了约瑟夫·马里克(Joseph Marikle)的解决方案，但也使它适用于FireFox，并添加了一种表格行样式来很好地度量。纯CSS解决方案，因为为此使用Javascript似乎完全没有必要，而且太过分了。

html

1
2
3
4
5
6
7
8
9
10
11
12
                content here
           
           
               
                    lots of content here
               
           
           
                content here
           
           
                content here

的CSS

1
2
3
4
5
.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%;}

如果要让表格遵守百分比高度，则需要在表格周围使用包装器，否则可以只在表格元素上设置像素高度。

相关讨论

可能不是跨浏览器，但我设法得到了这个：http://jsfiddle.net/QexkH/

基本上，它需要固定高度的页眉和页脚。它绝对定位桌子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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;
    }
相关讨论

我发现的结果!!!，在表中CSS td{height:60px;}与CSS td{min-height:60px;}的工作原理相同

我知道那种情况下细胞高度看起来很差。此javascript解决方案不需要隐藏溢出。

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

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

该脚本每次将表格宽度增加300px(最大4000px)，直到行缩小到max-height(160px)，并且您还可以根据需要编辑数字。

1
2
3
4
5
6
7
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表格解决方案通过增加表格宽度来增加行或单元格的最大高度限制，JavaScript

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

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

解决它的另一种方法可能/可能不适合但肯定是最简单的：

1
2
3
td {
    display: table-caption;
}

相关讨论