html - 如何设置表格单元格的最大高度？

Question

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

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

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

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

score 158 · Accepted Answer

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

score 9 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

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

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

score 1 · Accepted Answer

尝试这样的事情： -

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

score 0 · Accepted Answer

使用以下样式：

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

HTML是：

<div>
    your long text here
</div>

score 0 · Accepted Answer

在 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 表格解决方案通过增加表格宽度来限制行或单元格的最大高度，Javascript

score 0 · Accepted Answer

如果您使用的是 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>

score -1 · Accepted Answer

-1

尝试

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

于 2012-12-02T09:25:03.897 回答

score -1 · Accepted Answer

这可能符合您的需求吗？

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

score -3 · Accepted Answer

这就是你想要的：

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

html - 如何设置表格单元格的最大高度？

10 回答 10

Related

Reference