如何将多个Bootstrap类合并为单个自定义CSS类应用到表格？

你提到的table:Table;这类写法不是标准CSS语法，目前没有浏览器支持，不过可以通过以下几种可行方案实现需求：

方案1：使用Sass/SCSS预处理器（最推荐） #

Bootstrap本身就是基于Sass开发的，内置了所有类对应的mixin和样式占位符，你可以直接调用实现样式合并：

// 先按顺序导入Bootstrap核心scss依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/tables";

// 自定义单类合并多个Bootstrap样式
.my-custom-table {
  @extend .table;
  @extend .table-dark;
  // 此处还可以补充你自己的额外自定义样式
}

编译完成后，直接写<table class="my-custom-table">就能实现和class="table table-dark"完全一致的效果，后续要调整样式只需要修改这一个类即可。

如果担心@extend带来的样式冲突，也可以用Bootstrap提供的专用mixin实现，兼容性更好：

.my-custom-table {
  @include table-variant($dark);
  // 其他自定义样式
}

方案2：纯CSS手动复制对应规则 #

如果不想使用预处理器，可以直接把Bootstrap中.table和.table-dark对应的所有样式规则，复制到你自定义的类名下：

.my-custom-table {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #373b3e;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.my-custom-table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
/* 剩余.table、.table-dark对应的所有样式规则全部复制到此处即可 */

这种方案的缺点是后续Bootstrap版本更新时，需要手动同步样式规则，维护成本更高。

方案3：全局覆盖table标签样式 #

如果你站点内所有表格都需要用到table table-dark的效果，不需要单独区分，可以直接给全局table标签应用样式，连自定义类都不用加：

// Sass写法示例
table {
  @extend .table;
  @extend .table-dark;
}

这样所有<table>标签不需要加任何类名，就能自动应用对应的样式。

注意：不建议直接修改Bootstrap官方的原生样式表文件，后续升级Bootstrap版本时你的修改会被直接覆盖，最好单独写自定义样式表，引入顺序放在Bootstrap样式表之后即可。

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