如何使Bootstrap两个table-striped表格移动端堆叠后条纹交替衔接？

这个问题我之前也碰到过，Bootstrap默认的table-striped是单独对每个表格内部的行按奇偶计数的，所以两个表格拼在一起时，衔接处的行颜色就会撞色，确实很影响视觉连贯性。给你两个实用的解决方案，看哪种更适配你的场景：

方法一：静态CSS适配（已知第一个表格行数奇偶） #

如果你的第一个表格行数是固定的，能提前确定最后一行的奇偶性，那直接用CSS反转第二个表格的条纹规则就行：

1. 给第二个表格添加额外的自定义类，比如table-striped-reverse：

<table class="table table-striped table-striped-reverse">
  <!-- 隐藏的表头 -->
  <thead class="d-none">...</thead>
  <tbody>...</tbody>
</table>

2. 编写对应的CSS样式，反转条纹逻辑：

/* 让第二个表格的奇数行显示白色，偶数行显示Bootstrap默认条纹色 */
.table-striped-reverse tbody tr:nth-of-type(odd) {
  background-color: #fff; /* 匹配表格默认背景色 */
}
.table-striped-reverse tbody tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.05); /* 完全对齐Bootstrap原生条纹色 */
}

如果第一个表格的最后一行是偶数行（白色），只需要把上面代码里的odd和even样式互换即可。

方法二：动态JS适配（行数不固定的情况） #

如果第一个表格的行数是动态生成的，没法提前确定奇偶性，那就用JS判断第一个表格的最后一行类型，再给第二个表格添加对应的反转类：

1. 先准备好两种反转条纹的CSS类：

/* 场景1：第一个表格最后一行是深色（奇数行），第二个表格从白色开始 */
.table-striped-start-white tbody tr:nth-of-type(odd) {
  background-color: #fff;
}
.table-striped-start-white tbody tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 场景2：第一个表格最后一行是白色（偶数行），第二个表格从深色开始 */
.table-striped-start-gray tbody tr:nth-of-type(even) {
  background-color: #fff;
}
.table-striped-start-gray tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

2. 编写JS代码动态判断并添加类：

// 给两个表格分别加标识类，方便选择
const firstTable = document.querySelector('.first-striped-table');
const secondTable = document.querySelector('.second-striped-table');

// 获取第一个表格的tbody行数
const rowCount = firstTable.querySelectorAll('tbody tr').length;

// 根据最后一行的奇偶性，给第二个表格加对应的反转类
if (rowCount % 2 === 1) {
  // 最后一行是奇数（深色），第二个表格从白色开始
  secondTable.classList.add('table-striped-start-white');
} else {
  // 最后一行是偶数（白色），第二个表格从深色开始
  secondTable.classList.add('table-striped-start-gray');
}

这样不管第一个表格有多少行，两个表格的条纹都能完美衔接交替了～

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