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

标签 html css html-table

我无法弄清楚如何将此表的高度包含在包含的 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/

最佳答案

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

        td {
            font-size: 40px;
        }

        table {
            table-layout: fixed;
            height: 100%;
        }
<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>

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

关于html - 如何保持父 div 中包含的表高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37369716/

相关文章:

html - 在另一个父 DIV 中垂直居中两个 DIV,包括它们的内容

html - 如何让 h1 和 ul 保持在同一行

javascript - JQuery - 搜索 HTML 表格 - rowspan 问题

html - 从表格边框、棋盘 HTML 中排除行

html - IE9、Opera 和旧版 Safari 尝试将我的 Node.js 服务器托管站点作为文件下载?

html - 如何将其中一个相机图像插入到 html 元素中——输入?

jquery - CSS 左更改与 jQuery 未转换

css - 如何获得下拉菜单的正确宽度

html - 更改最后一个表中的限制

javascript:worker 同步