如何设置表格单元格的最大高度？答案

【问题标题】：How to set maximum height for table-cell?如何设置表格单元格的最大高度？
【发布时间】：2012-11-20 00:21:47
【问题描述】：

我有一个固定宽度和高度的表格单元格，如果文本太大，单元格大小应保持不变，文本应通过溢出隐藏：隐藏。

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

但是，如果添加的文本过多，表格单元格会扩展超过 100 像素。有什么防止它膨胀的技巧吗？

文本长度应为几行，因此“white-space:nowrap”解决方案不适用

【问题讨论】：

Setting max-height for table cell contents的可能重复

标签： html css

【解决方案1】：

试试

   <td style="word-wrap: break-word">Long text here</td>

【讨论】：

【解决方案2】：

这就是你想要的：

td {
   max-height: whatever;
   max-width: whatever;
   overflow: hidden;
}

【讨论】：

除了..stackoverflow.com/questions/509711/…

【解决方案3】：

试试这样的：-

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

【讨论】：

哎哟！它在 Fiddle 中完美运行，但是当我尝试将它添加到我的代码中时，它破坏了垂直对齐：中间。对齐是使用表格单元格的原因。抱歉，我忘了在问题中提及它
表格不应该用于创建网站的总体布局...这是 90 年代风格

【解决方案4】：

使用下面的样式：

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

HTML 是：

<div>
    your long text here
</div>

【讨论】：

display: fixed 属性不存在：developer.mozilla.org/en-US/docs/Web/CSS/display

【解决方案5】：

通过CSS 2.1 rules，表格单元格的高度是“内容所需的最小高度”。因此，您需要使用内部标记间接限制高度，通常是 div 元素 (<td><div>content</div></td>)，并在 div 元素上设置 height 和 overflow 属性（无需在其上设置 display: table-cell ，当然，因为这会使其高度符合 CSS 2.1 表格单元格规则）。

【讨论】：

@Jukka 如何设置td 的高度，如桌面高度的50%？
@EmptyData 将其作为问题发布。

【解决方案6】：

我认为接受的答案实际上并不能完全解决问题。您想在表格单元格内容上有一个vertical-align: middle。但是，当您在表格单元格中添加一个 div 并为其指定高度时，该内部 DIV 的内容将位于顶部。检查此jsfiddle。溢出：隐藏；工作正常，但如果你把内容缩短到只有一行，这一行won't be centered vertically

解决方案不是在表格单元内添加 DIV，而是在外部添加。这里是the Code：

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}

<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div>

【讨论】：

如何为tablecell设置height:50%
@EmptyData 自从我写这篇文章以来已经有一段时间了，但是将 tablecell 设置为行高的 50% 是没有意义的。在我的示例中，您实际上可以将height: 100% 省略为tablecell，它仍然可以工作。但是表格单元格不能是表格行的一半。也许你的意思是rowspan？我需要先弄清楚自己是如何工作的，但也许在 stackoverflow 上已经有一些答案了......祝你好运

【解决方案7】：

在 css 中你不能设置表格单元格的最大高度，如果你用空白 nowrap 则你不能用最大宽度打破它，所以解决方案是 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

【讨论】：

【解决方案8】：

这可能符合您的需求吗？

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

【讨论】：

没有解释这段代码的作用或工作原理

【解决方案9】：

您可以执行以下任一操作：

使用css属性“line-height”并为每个表格行设置它（），这也会使内容垂直居中
将“display”css属性设置为“block”，如下：

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}

【讨论】：

【解决方案10】：

如果您使用 display:table-cell，max-height 将不适用于这种样式的 div。所以对我有用的解决方案是设置内部 div 的最大高度

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>

【讨论】：