如何检测动态表格中的溢出行并维持表格高度？

当然有办法检测行是否溢出！我们可以利用元素的scrollHeight和clientHeight属性来判断表格内容是否超出了容器高度，再结合DOM操作自动移除底部多余的行。下面是具体的实现思路和完整代码：

核心实现思路 #

• 溢出检测逻辑：表格容器的clientHeight是它的可视高度，而表格<tbody>的scrollHeight是所有行的总高度。当scrollHeight > clientHeight时，说明内容已经超出容器范围，需要移除底部的行。
• 顶部添加行：使用insertBefore方法将新行插入到<tbody>的第一个子元素之前，实现顶部追加的效果。
• 自动清理溢出行：每次添加新行后，循环检查内容高度是否超出容器，一旦超出就删除最后一行，直到表格内容高度不超过容器高度为止。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .cnt { 
            width: 100vw; 
            height: 50vh; 
            max-width: 100vw; 
            max-height: 50vh; 
            text-align: center; 
            border: 1px solid black; 
        }
        section { height: 100% }
        table { 
            display: block; 
            margin: 0; 
            padding: 0; 
            width: 100%; 
            height: 100%; 
            overflow: hidden; 
        }
        table tbody {
            display: block;
            height: 100%;
            overflow-y: hidden; /* 隐藏滚动条，我们靠逻辑控制行数 */
        }
        table tbody tr td{ 
            margin: 0; 
            padding: 8px; /* 给单元格加内边距，让内容更美观 */
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="cnt">
        <section>
            <table>
                <tbody id="tableBody">
                    <tr><td>a</td></tr>
                    <tr><td>b</td></tr>
                    <tr><td>c</td></tr>
                    <tr><td>d</td></tr>
                    <tr><td>e</td></tr>
                    <tr><td>f</td></tr>
                    <tr><td>g</td></tr>
                    <tr><td>i</td></tr>
                </tbody>
            </table>
        </section>
    </div>
    <button onclick="addRowToTop('j')">添加行j到顶部</button>
    <button onclick="addRowToTop('k')">添加行k到顶部</button>
    <button onclick="addRowToTop('l')">添加行l到顶部</button>

    <script>
        const tbody = document.getElementById('tableBody');
        const table = tbody.parentElement;

        function addRowToTop(content) {
            // 创建新行
            const newRow = document.createElement('tr');
            const newTd = document.createElement('td');
            newTd.textContent = content;
            newRow.appendChild(newTd);

            // 插入到tbody顶部
            tbody.insertBefore(newRow, tbody.firstChild);

            // 检查并移除溢出的行
            while (tbody.scrollHeight > table.clientHeight) {
                // 删除最后一行
                tbody.removeChild(tbody.lastChild);
            }
        }
    </script>
</body>
</html>

代码说明 #

1. 样式调整：给<tbody>也设置了display: block和height: 100%，这样scrollHeight才能正确计算所有行的总高度；给单元格添加了内边距和分隔线，提升可读性。
2. 添加行逻辑：点击按钮时调用addRowToTop函数，传入行内容，创建新行并插入到顶部。
3. 溢出清理逻辑：每次添加新行后，进入循环判断tbody.scrollHeight是否大于表格的clientHeight，如果是就删除最后一行，直到内容高度符合容器限制。

按照你的示例需求，当添加新行后，底部的f、g、i行会被自动移除，确保表格始终不超出设定的50vh高度。

内容的提问来源于stack exchange，提问作者Tian Na