如何设置Bootstrap表格列宽 实现内容按宽度自动换行不溢出

解决方案 #

你出现这个问题的核心原因是Bootstrap 3默认表格使用table-layout: auto的自动布局算法，列宽会根据内容长度自动调整，你手动设置的20%宽度会被长文本撑开，同时缺少强制换行规则导致内容溢出覆盖其他列，按以下方式修改CSS即可：

/* 先给目标表格开启固定布局，自定义列宽才会生效 */
#sms_data {
    table-layout: fixed;
    width: 100%;
}

/* 统一设置Message列的表头和单元格样式 */
th.message, 
#sms_data tbody td:first-child {
    width: 20%;
    /* 强制文本换行，兼容不同浏览器 */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

修改完成后，Message列会固定占表格总宽度的20%，160字符的长文本会自动在列内换行，不会溢出到其他列。如果你的其他列也需要固定宽度，按照同样格式给对应th、td设置宽度即可。

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