Question

如果TBODY高度为300px且其中显示的内容仅为50px，则显示内容底部的空白空间，从51PX到300PX，我的意图是如果内容＆gt; 300使用overflow：auto我想显示滚动条。请建议我

<!DOCTYPE html>
<html>
<head>
<style>


div.TableContainerToScroll  {
            height: 651px;
            overflow: auto;
            width: 100%;
            margin: 15px 0 0 0;
            position: relative;
            vertical-align:top;
        }

html>/**/body div.TableContainerToScroll table>tbody {
            overflow: auto;
            height: 200px;
            overflow-x: hidden;
            background-color: #00FF00;
        }

div.otherclass  {}

</style>
</head>
<body>

<div id="pdata" class="TableContainerToScroll">
<div class="otherclass">
<TABLE cellSpacing=0 cellPadding=0 width="97%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=2 width="100%" align=center border=0>
<TBODY>
<TR>
<TD align=center><BR>Sample Text Here<BR></TD></TR></TBODY></TABLE>  </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
</div>
</div>
</body>

Answer 1

问题是行至少与内容一样高。见Table height algorithms：

表格行的高度＆＃39;元素的框是用户计算的 agent有行中的所有单元格可用：它是最大的单元格行计算的＆＃39;身高＆＃39;计算的＆＃39;身高＆＃39;每个细胞的行，以及单元格所需的最小高度（MIN）。

并max-height没有帮助，因为

在CSS 2.1中，＆＃39; min-height＆＃39;和＆＃39; max-height＆＃39;在桌子上，内联表，表格单元格，表格行和行组未定义。

然后，您无法使内容溢出单元格。但是，您可以将内容包装在max-height的容器中，然后让它溢出：

＆＃13;

div {
  overflow: auto;
  height: 175px;
}
p {
  border: 1px solid;
}
p.tall {
  height: 400px;
}
table {
  border: 1px solid blue;
  display: inline-table;
}

＆＃13;

<table>
  <tr>
    <td>
      <div>
        <p class="tall">I am so tall</p>
      </div>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <div>
        <p>I am not tall</p>
      </div>
    </td>
  </tr>
</table>

＆＃13;

显示内容较少时的HTML体高设置

1 个答案: