如何阻止HTML挤压表格内容？固定列宽CSS属性被覆盖问题求助

只需要修改两处CSS即可解决问题，不需要使用flex布局：

• 首先修改table元素的CSS规则，添加table-layout: fixed与宽度设置，避免表格被外层容器强制压缩：

table {
    float: left;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
    /* 新增以下两行 */
    table-layout: fixed;
    /* 若担心max-content兼容性可直接写死总宽度，比如5个数据集就写1500px */
    width: max-content;
}

table-layout: fixed会让浏览器严格按照你设定的列宽渲染单元格，width: max-content会让表格总宽度自动匹配所有列宽之和，不会被外层75%宽度的父容器压缩，外层div的横向滚动会正常生效。

• 其次修改table th的CSS规则补充属性，保证表头最多仅换行1次：

table th {
    border-bottom: 1px solid black;
    border-right: 1px solid black;

    background-clip: padding-box;
    text-align: center;
    background-color: lightblue;
    /* 新增以下4行 */
    line-height: 1.3em;
    max-height: 2.6em;
    overflow: hidden;
    word-wrap: break-word;
}

word-wrap: break-word保证表头长文本可以正常折行，overflow: hidden会隐藏超出两行的内容，实现最多换行1次的效果，同时不会被内容挤压撑高。

修改完成后你之前设置的table thead tr:first-child th的300px宽度会正常生效，不需要额外调整colgroup或JS逻辑。

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