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

Question

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

htmlcsshtml-table

65

我有一个表格，它应该始终占据屏幕高度的特定百分比。大多数行的高度都是固定的，但我有一行应该拉伸以填满可用空间。如果该行中某个单元格的内容超过了所需高度，则希望使用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>

- ccleve

如果您将代码粘贴到HTML页面中，您会看到它，只是表格占据了屏幕高度的50%以上。它应该只占用50％。在内容标签中放入大量文本。 - ccleve

1

可能是重复的问题：如何为表格单元设置最大高度？ - vaultah

9个回答

20

我们终于找到了一种解决方案。首先，问题是：表格总是根据内容自行调整大小，而不是强制内容适应表格大小。这限制了您的选择。

我们通过将内容div设置为display:none，让表格自行调整大小，在javascript中设置内容div的高度和宽度为封装td标签的内部高度和宽度。显示内容div。当窗口大小调整时，重复该过程。

- ccleve

4

@ccleve，能否请您提供一个可工作的jsfiddle代码？我无法确切理解您所做的事情。我一直面临着同样的问题。 - EdG

编码问题缺少编码答案 - undefined

3

可能不适用于所有浏览器，但我成功实现了这个效果：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;
    }

- Joseph Marikle

有趣的想法，我没有考虑过position:absolute。不过在Firefox上没用。 - ccleve

1

这需要在表格单元格内容周围添加一个包装器div：如果可能的话，只需设置包装器div的高度即可更轻松地完成。 - user56reinstatemonica8

在td内部的元素中使用"display: block"，不要使用"position: absolute"和"top, left,..."。 - Covii

2

我发现，在表格CSS中，td{height:60px;}和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';
    }
}

来源：通过增加表格宽度和Javascript实现HTML表格行或单元格的最大高度限制解决方案

- Mr. Rick

1

表格单元格的高度无法限制，但嵌套元素可以，正如其他人在这个问题中回答的那样，以及重复的如何为表格单元格设置最大高度？。

然而，之前的答案没有解决隐含的问题，即嵌套元素的高度如何根据可用空间自适应填充，而表格的高度仍然是屏幕的百分比。

根据问题描述和给定的代码，表格的高度应该是视口的50%，而不是父元素。因此，高度值应该使用视口长度单位进行声明，例如50vh或50vb。（1vh是视口高度的1%。vb是视口块的逻辑单位。）

table {
  height: 50vb;
}

嵌套的容器#content应该具有height: 100%和overflow: auto，以便它填充表格单元中所有可用的空间，而不会出现可见的溢出。（编辑：我发现Firefox不允许使用带有溢出的百分比高度。请参阅下一节进行计算。）

#content {
  height: 100%;
  overflow: auto;
}

然而，如果要隐藏溢出内容，则无法使用百分比来设置内容高度。（也许有人可以解释为什么。）该值可以计算表格高度减去其他行的高度（还应减去表格单元格上的边框和间距。）

#content {
  height: calc(50vb - 42px);
  overflow: hidden;
}

这个代码片段演示了一个响应式表格，可以实现滚动溢出和隐藏溢出。

table {
  width: 50%;
  height: 50vb;
  border-spacing: 0;
}

td {
  padding: 0;
  border: 1px solid;
}

.headfoot {
  height: 20px;
}

#content {
  height: 100%;
  overflow: auto;
}


table:nth-of-type(2) #content {
  height: calc(50vb - 42px);
  overflow: hidden;
}

table:nth-of-type(2) {
 margin-block-start: 4em;
}

<table>
  <tr class="headfoot"><td>header</td></tr>
  <tr>
    <td>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Dignissim sodales ut eu sem integer vitae justo eget magna. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Tortor aliquam nulla facilisi cras. Dolor sit amet consectetur adipiscing elit ut. Sed libero enim sed faucibus turpis in eu. Duis convallis convallis tellus id interdum. Nunc congue nisi vitae suscipit. Integer enim neque volutpat ac tincidunt vitae semper. Metus dictum at tempor commodo ullamcorper. Dictum sit amet justo donec enim diam vulputate ut. Bibendum enim facilisis gravida neque convallis a.</p>
        <p>Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Tristique risus nec feugiat in fermentum. Iaculis at erat pellentesque adipiscing commodo elit. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Mattis molestie a iaculis at erat pellentesque. Massa enim nec dui nunc mattis. Sit amet dictum sit amet justo donec enim diam. Et netus et malesuada fames ac turpis egestas maecenas. Pretium aenean pharetra magna ac. Sit amet nisl purus in mollis. Euismod lacinia at quis risus sed vulputate odio ut enim. Non enim praesent elementum facilisis leo vel fringilla est. Ac ut consequat semper viverra nam. Egestas fringilla phasellus faucibus scelerisque.</p>
        <p>Egestas purus viverra accumsan in nisl nisi. Nulla malesuada pellentesque elit eget. Quis auctor elit sed vulputate mi sit. Elit sed vulputate mi sit. Duis at consectetur lorem donec massa. Ipsum dolor sit amet consectetur. Lacus vel facilisis volutpat est velit egestas dui id. Purus in mollis nunc sed id semper risus in. Scelerisque felis imperdiet proin fermentum leo vel orci. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Pulvinar proin gravida hendrerit lectus a.</p>
      </div>
    </td>
  </tr>
  <tr class="headfoot"><td>footer</td></tr>
</table>


<table>
  <tr class="headfoot"><td>header</td></tr>
  <tr>
    <td>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Dignissim sodales ut eu sem integer vitae justo eget magna. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Tortor aliquam nulla facilisi cras. Dolor sit amet consectetur adipiscing elit ut. Sed libero enim sed faucibus turpis in eu. Duis convallis convallis tellus id interdum. Nunc congue nisi vitae suscipit. Integer enim neque volutpat ac tincidunt vitae semper. Metus dictum at tempor commodo ullamcorper. Dictum sit amet justo donec enim diam vulputate ut. Bibendum enim facilisis gravida neque convallis a.</p>
        <p>Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Tristique risus nec feugiat in fermentum. Iaculis at erat pellentesque adipiscing commodo elit. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Mattis molestie a iaculis at erat pellentesque. Massa enim nec dui nunc mattis. Sit amet dictum sit amet justo donec enim diam. Et netus et malesuada fames ac turpis egestas maecenas. Pretium aenean pharetra magna ac. Sit amet nisl purus in mollis. Euismod lacinia at quis risus sed vulputate odio ut enim. Non enim praesent elementum facilisis leo vel fringilla est. Ac ut consequat semper viverra nam. Egestas fringilla phasellus faucibus scelerisque.</p>
        <p>Egestas purus viverra accumsan in nisl nisi. Nulla malesuada pellentesque elit eget. Quis auctor elit sed vulputate mi sit. Elit sed vulputate mi sit. Duis at consectetur lorem donec massa. Ipsum dolor sit amet consectetur. Lacus vel facilisis volutpat est velit egestas dui id. Purus in mollis nunc sed id semper risus in. Scelerisque felis imperdiet proin fermentum leo vel orci. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Pulvinar proin gravida hendrerit lectus a.</p>
      </div>
    </td>
  </tr>
  <tr class="headfoot"><td>footer</td></tr>
</table>

- Tim R

0

我在创建表格布局时遇到了同样的问题。我使用了Joseph Marikle的解决方案，但也让它适用于FireFox，并添加了一个table-row样式以确保良好的效果。这是一个纯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%;}

如果您想让表格按照百分比高度显示，那么您需要在表格周围添加一个包装器；否则，您可以直接在表格元素上设置像素高度。

- cellen

3

这并不是一个纯CSS的解决方案。你使用了div来重新制作了你的表格。 - Nathan Arthur

2

用 div 元素生成 HTML 表格并不是一个好的方法。之所以有 table 标签，是因为需要考虑到残障用户。 - jdrake

@NathanArthur 纯CSS解决方案，无需使用JavaScript，但您也在抱怨使用了HTML？ - Tim R

@TimR 那条评论已经六年了。但是，没错，你说得对，我也在抱怨使用HTML。 - Nathan Arthur

0

我只是使用了这个插件解决了这个问题：http://dotdotdot.frebsite.nl/

它会自动将目标的最大高度设置为三个点。

- Francesco Borzi

0

我是这样解决的：

.tbGDPR td {
    border: 1px solid #eee;
    border-collapse: collapse;
}
.tbGDPR td div {
    max-height: 2em;
    overflow: hidden;
}

- Merlinox

-3

另一种可能适合，但肯定最简单的方法是:

td {
    display: table-caption;
}

- zak

5

这个回答可以通过描述它的作用来更加清晰明了。 - TylerH

2

它将显示设置为表格标题。 - zak

9

显然，但是这对代码有什么影响呢？换句话说，将显示值设置为table-caption为什么能解决OP的问题？好的答案应该提供解决方案和解释。 - TylerH

2

table-caption 总是在表格上方呈现（@media print），类似于 th，但不会在每个页面重复。 - venimus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- keithics · Accepted Answer

只需将标签放在TD内的一个div中，并设置高度和overflow即可，示例如下。

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