HTML表格溢出问题求助：需支持内容隐藏、超出行隐藏及运行时加列

核心实现思路 #

• 首先启用表格固定布局模式：给<table>设置table-layout: fixed，该模式下浏览器会按照设置的列宽渲染单元格，不会随内容自动撑开，动态新增列时只要给新列指定宽度即可正常适配，同时单元格溢出属性才能生效。
• 外层容器直接控制高度溢出：你用到的#container已经设置了固定宽高，直接给它添加overflow: hidden，超出容器高度的表格行将被整体隐藏，不需要单独给tbody设置overflow（原生table的tbody溢出属性兼容性差，用外层容器控制更稳定）。
• 统一单元格溢出规则：所有需要文本不换行的单元格统一设置white-space: nowrap+overflow: hidden即可实现内容超出列宽隐藏的效果。

修改后完整可运行代码 #

<style>
    #container {
        position:absolute;
        width:400px;
        height:200px;
        display: inline-block;
        font: 16px arial;
        border: 1px solid steelblue;
        background-color: lightgoldenrodyellow;
        /* 新增：控制超出高度的内容整体隐藏 */
        overflow: hidden;
    }

    .orderCell {
        width: 65px;
        text-align:right;
    }

    table {
        border: none;
        width: 100%;
        cursor: pointer;
        /* 新增：启用固定表格布局，列宽按设置值渲染，溢出生效 */
        table-layout: fixed;
    }

    tbody {
        border: none;
        cursor: pointer;
        background-color:red;
        width:100%;
    }

    .textCell {
        white-space:nowrap;
        overflow:hidden;
        background-color:yellow;
        /* 可选：如果需要溢出显示省略号可以加下面这行 */
        /* text-overflow: ellipsis; */
    }

</style>

<div id="container">
    <table>
        <thead>
            <tr>
                <td class="orderCell">
                    Col 1
                </td>
                <td>
                    Col 2
                </td>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td class="orderCell">
                    1
                </td>
                <td class="textCell">
                    Data col 2. I want horizontal overflow to be hidden. If this is in a row that extends below the table, I want the entire row to be hidden.
                </td>
            </tr>
            <tr>
                <td class="orderCell">
                    2
                </td>
                <td class="textCell">
                    Data col 2
                </td>
            </tr>
            <!-- 可以自行添加更多行测试高度溢出隐藏效果 -->
            <!-- <tr><td class="orderCell">3</td><td class="textCell">测试行3</td></tr>
            <tr><td class="orderCell">4</td><td class="textCell">测试行4</td></tr>
            <tr><td class="orderCell">5</td><td class="textCell">测试行5</td></tr> -->
        </tbody>
    </table>
</div>

动态新增列兼容说明 #

新增列时只需给表头和对应行的新单元格设置指定宽度即可，现有布局规则完全适配，不需要修改全局CSS，示例JS代码参考：

// 示例：新增一列，列宽设为100px
const headerRow = document.querySelector('thead tr')
const newHeader = document.createElement('td')
newHeader.style.width = '100px'
newHeader.textContent = 'Col 3'
headerRow.appendChild(newHeader)

// 给每行加对应单元格
document.querySelectorAll('tbody tr').forEach(row => {
  const newCell = document.createElement('td')
  newCell.className = 'textCell'
  newCell.textContent = '新列动态内容测试'
  row.appendChild(newCell)
})

内容的提问来源于stack exchange，提问作者Len White