如何用Bootstrap或纯CSS实现table的th、tr宽度灵活自适应

问题根源 #

你为tr、td设置了display: flex属性，覆盖了表格元素原生的布局逻辑，导致table自带的列宽自适应能力失效。

调整后的样式代码 #

.table { 
  /* 开启表格自动布局，根据单元格内容自动分配列宽 */
  table-layout: auto;
  width: auto; 
  /* 也可以设为100%占满父容器，列宽会按内容占比自动分配 */
  border-collapse: collapse; /* 可选，合并边框让样式更统一 */
} 
th {
  color: $gray;
  font-weight: 500;
  border-top: none;
  border-bottom: none; 
  /* 实现内容垂直居中 */
  vertical-align: middle;
  padding: .75rem 0 .75rem .75rem;
  /* 可选：内容不折行，强制列宽撑开适配最长内容 */
  white-space: nowrap;
}

tr:nth-child(odd){  
  background-color:rgba(238, 238, 238, 0.5);
}

tr {
  max-height: 34px;
  /* 删除原有的flex相关属性，保留原生table-row布局逻辑 */
}

td {
  /* 删除原有的flex相关属性，保留原生table-cell布局逻辑 */
  max-height: 34px; 
  padding: .75rem 0 .75rem .75rem;
  border-top: none;
  font-weight: 500;
  /* 实现内容垂直居中 */
  vertical-align: middle;
  /* 可选：内容不折行，强制列宽撑开适配最长内容 */
  white-space: nowrap;
}

改动说明 #

• 完全保留table原生标签结构，未改用div实现
• 显式设置table-layout: auto，依赖表格原生能力实现列宽自动适配：内容长的列自动加宽，内容短的列自动收窄
• 用表格原生的vertical-align: middle替代flex布局实现单元格内容垂直居中，符合表格的布局逻辑
• 可选添加white-space: nowrap属性，可强制单元格内容不折行，保证所有内容都在一行展示，列宽会自动撑开适配同列最长的单元格内容。如果允许内容折行，删除这个属性即可。

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