如何设置 HTML table 的最大高度？

Question

我目前在 HTML 中有一个 table 看起来像这样。

            <div class="tables">
              <table>
              <tr>
                <th>Name</th>
                <th>Industry</th>
                <th>Does the company identify that climate-related performance is factored into the overall board or executive leadership compensation</th>
                <th>Last updated</th>
              </tr>
              <tr>
                <td>BP</td>
                <td>Oil & Gas</td>
                <td>Yes</td>
                <td>2020-11-28</td>
              </tr>
              </table>
            </div>

问题是，如果我有一个长值 header 但值很短的列，那么 header 列会变得很短（就像显示“公司是否识别.. 。”的值为“是”），文本看起来不太好。我的想法是为 table 指定最大高度，以便它被迫扩展列的宽度以适应所有文本。问题是在 CSS 中，当我设置 display: block 然后 max-height 对于 table，它根本不起作用。 table 中的列没有变宽，整个事情变得一团糟。有什么方法可以强制 table 中的列变宽以适应所有文本？

Answer 1

您可以将 table 的高度设置为整个视口的高度，每次都具有最大高度，并通过在 header

<!DOCTYPE html>
<html>
<head>
<style>
table{
    height:100vh;
}
td,th {
    border: 1px solid #000;
}
tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
</style>
</head>
<body>
    <div class="tables">
      <table>
      <tr>
        <th>Name</th>
        <th>Industry</th>
                <th>Does the company identify that climate-related performance is factored into the overall board or executive leadership compensation</th>
        <th>Last updated</th>
      </tr>
      <tr>
        <td>BP</td>
        <td>Oil & Gas</td>
        <td>Yes</td>
        <td>2020-11-28</td>
      </tr>
      </table>
    </div>
</body> 
</html>

用这个填充宽度和视口高度。

如果你不想填满整个视口高度，你应该去掉height:100vh;。

像这样：

或者你可以这样做：

tr td:last-child {
    overflow: hidden;
}

获取下面的显示（但这不会填满视口的整个宽度，而不是第一个显示）

如何设置 HTML table 的最大高度？

How to set a maximum height for an HTML table?

html

css

format

height

width