Bootstrap4 table-responsive容器内表格无法修改指定td宽度问题求助

问题根因 #

你设置的宽度不生效主要是以下几个原因：

• Bootstrap 4 的.table类默认采用table-layout: auto布局，该模式下列宽会根据单元格内容自动适配，直接给td设置宽度属性不会生效
• 你仅针对td设置宽度，未同步给对应列的th设置，会导致列宽不统一
• 媒体查询使用max-device-width判断设备宽度，该属性匹配的是设备物理分辨率，在高DPI移动设备上容易出现判断失效的问题，当前响应式开发标准更推荐使用max-width匹配视口宽度

解决方法 #

按以下步骤修改即可：

1. 给表格开启固定布局模式table-layout: fixed，该模式下你自定义的列宽配置会生效
2. 同步给第四列的th和td设置宽度，选择器优先级要高于Bootstrap默认样式
3. 替换媒体查询的宽度判断条件，适配所有移动设备
4. 可按需配置内容溢出规则，避免长内容撑破布局

修改后的CSS代码如下：

/* 适配所有宽度≤640px的移动设备 */
@media screen and (max-width: 640px) {
  .table-responsive .table {
    table-layout: fixed;
  }
  .table td:nth-child(4), 
  .table th:nth-child(4) {
    background-color: red;
    width: 80%;
    /* 可选：内容超过宽度自动换行 */
    word-wrap: break-word;
    /* 可选：内容超出显示省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    */
  }
}

如果不需要其他列宽度平均分配，也可以单独给其他列设置更小的固定宽度，比如操作列设置120px、序号列设置40px等，布局会更可控。

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