Bootstrap表格设置首列宽度及固定首列可见失效问题

问题根源 #

给metric列th加行内宽度不生效，核心是Bootstrap默认表格采用table-layout: auto自动布局规则，浏览器会遍历所有单元格内容自动计算列宽，单独给单个th设置的宽度会被自动计算逻辑覆盖，不会生效。
同时要实现第一列固定可见，需要用粘性定位做和固定表头一致的处理，仅靠Bootstrap默认类无法直接实现。

具体修复步骤 #

• 首先给表格开启固定布局模式，在<table>标签上添加如下样式：

<table class="table" style="table-layout: fixed; width: 100%">

开启table-layout: fixed后，浏览器会严格按照你给th设置的宽度分配列宽，不会被单元格内容撑开，此时你给第一列th设置的width: 30%就会正常生效。

• 然后实现第一列固定可见效果，新增通用粘性列样式类：

.sticky-first-col {
  position: sticky;
  left: 0;
  /* 必须设置不透明背景，否则滚动时会透出后方单元格内容 */
  background-color: #fff;
  /* z-index要高于普通单元格，保证滚动时覆盖在其他列上方 */
  z-index: 2;
}
/* 固定表头的z-index要高于固定列，避免表头和列交叉位置被列覆盖 */
thead th {
  z-index: 3;
}

给第一列的表头th、tbody中每一行的第一个td都加上sticky-first-col类即可，横向滚动表格时第一列就会始终固定在左侧可见。

注意：如果表格外层套了滚动容器，不要给滚动容器设置transform相关属性，否则会破坏粘性定位的生效基准，导致固定列失效。

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