Question

我无法弄清楚如何将此表高度保存在包含div中。我的目标是能够滚动以便查看所有内容。在处理宽度时有很多解决方案可以解决这个问题，但是我无法让它们在高度上工作。

<html>

<head>
    <style>
        .container {
            border: 1px solid black;
            height: 100px;
        }

        td {
            font-size: 40px;
        }

        table {
            table-layout: fixed;
            height: 100%;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>
                        header
                    </th>
                    <th>
                        header
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

https://jsfiddle.net/meeow314159/3vs9bmsf/

Answer 1

＆＃13;

        .container {
            border: 1px solid black;
            height: 100px;
            overflow-y: scroll;
        }

        td {
            font-size: 40px;
        }

        table {
            table-layout: fixed;
            height: 100%;
        }

＆＃13;

<div class="container">
  <table>
    <thead>
      <tr>
        <th>
          header
        </th>
        <th>
          header
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          data
        </td>
        <td>
          data
        </td>
      </tr>
      <tr>
        <td>
          data
        </td>
        <td>
          data
        </td>
      </tr>
      <tr>
        <td>
          data
        </td>
        <td>
          data
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

你快到了。 overflow-y需要应用于父容器，并在其上设置高度，而不是表本身。希望这会有所帮助。

Answer 2

.container { overflow-y:scroll; }

Answer 3

您需要在容器上应用overflow-y:scroll

https://jsfiddle.net/3vs9bmsf/1/

.container {
        border: 1px solid black;
        height: 100px;
        overflow-y: scroll;
 }*

Answer 4

添加display：block;到表

     table {
        table-layout: fixed;
           height: 100%;
        overflow-y: scroll;
        display:block;
    }

Answer 5

你应该查看here有关溢出的一些好建议如果你想用y-ax来控制文本，可以查看word-wrap和white-space。

如何保持父div中包含的表高度

5 个答案: