如何实现首列限宽、次列文本超出省略的固定宽度CSS表格布局？

问题根源 #

默认表格采用自动布局算法，会根据单元格内容动态计算宽度，第二列设置white-space: nowrap后，文本不会折行，会强制撑宽单元格最终导致整个表格超出设定的250px宽度。

修复方案 #

只需要修改两处CSS即可实现需求：

• 给.table类新增table-layout: fixed属性，开启固定表格布局模式，强制表格严格遵循设定的总宽度，列宽按设定值分配不受内容影响
• 给.truncate类新增word-wrap: break-word属性，保证第一列文本超出最大宽度时自动换行

修改后完整CSS代码 #

.table {
  display: table;
  width: 250px;
  table-layout: fixed; /* 新增属性 */
  overflow: hidden;
  background: #f7f5eb;
  color: #cf6824;
}

.tr {
  display: table-row;
}

.tc {
  display: table-cell;
  padding: 10px 0;
}

.truncate {
  max-width: 100px;
  word-wrap: break-word; /* 新增属性 */
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML代码无需修改，修改后即可实现预期效果：

• 表格总宽度固定为250px不会溢出
• 第一列最大宽度100px，内容超出自动换行
• 第二列占满剩余150px宽度，内容超出不换行，末尾显示省略号

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