Bootstrap 5.3中如何将条纹表格最后两行背景设为白色

嘿，我太懂你遇到的这个坑了！之前你尝试的几种方法没生效，核心原因是Bootstrap 5的table-striped样式不是给<tr>本身设置背景色，而是通过.table-striped>tbody>tr:nth-of-type(odd)>*这个选择器，直接给<tr>里面的<td>、<th>这些单元格加条纹背景。所以你给<tr>加bg-white或者自定义类，都会被单元格上的条纹样式盖过去，自然看不到效果～

下面给你两种简单可行的解决方案，选你顺手的用就行：

方案一：直接给单元格加Bootstrap工具类（无需自定义CSS） #

既然条纹样式是作用在单元格上的，那我们直接给最后两行的所有<td>、<th>加上bg-white工具类就行，简单粗暴：

<tr>
  <td class="border-0 bg-white"></td>
  <td class="border-0 bg-white"></td>
  <th class="border-0 text-end bg-white"> Cash </th>
  <td class="border-0 text-end bg-white"> $9,513.12 </td>
</tr>
<tr>
  <td class="border-0 bg-white"></td>
  <td class="border-0 bg-white"></td>
  <th class="border-0 text-end bg-white"> TOTAL </th>
  <td class="border-0 text-end bg-white"> $10,000.00 </td>
</tr>

方案二：自定义CSS类（更优雅，适合批量修改） #

如果不想给每个单元格都加类，我们可以写一段自定义CSS，精准选中最后两行的所有单元格，覆盖条纹样式：

写法1：直接定位最后两行 #

在<head>里加一个<style>标签，写入以下样式：

/* 选中tbody最后两行的所有单元格，用Bootstrap内置变量保证颜色统一 */
.table-striped tbody tr:nth-last-child(2) *,
.table-striped tbody tr:last-child * {
  background-color: var(--bs-white);
}

写法2：给目标行加专属类 #

先给最后两行的<tr>加一个专属类（比如no-stripe）：

<tr class="no-stripe">
  <td class="border-0"></td>
  <td class="border-0"></td>
  <th class="border-0 text-end"> Cash </th>
  <td class="border-0 text-end"> $9,513.12 </td>
</tr>
<tr class="no-stripe">
  <td class="border-0"></td>
  <td class="border-0"></td>
  <th class="border-0 text-end"> TOTAL </th>
  <td class="border-0 text-end"> $10,000.00 </td>
</tr>

然后在<head>的<style>里写对应样式：

.table-striped tbody tr.no-stripe * {
  background-color: var(--bs-white);
}

完整修改后的代码示例 #

这里用方案二的专属类写法，给你贴出完整可运行的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <title> Example code </title>
  <style>
    .table-striped tbody tr.no-stripe * {
      background-color: var(--bs-white);
    }
  </style>
</head>
<body>
  <main class="container py-5 text-center">
    <div class="container">
      <div class="row justify-content-center">
        <table class="table table-striped w-75 p-3 justify-content-center">
          <thead>
            <tr>
              <th class="text-start">Symbol</th>
              <th class="text-end">Shares</th>
              <th class="text-end">Price</th>
              <th class="text-end">TOTAL</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-start"> NFLX </td>
              <td class="text-end"> 1 </td>
              <td class="text-end"> $486.88 </td>
              <td class="text-end"> $486.88 </td>
            </tr>
            <tr class="no-stripe">
              <td class="border-0"></td>
              <td class="border-0"></td>
              <th class="border-0 text-end"> Cash </th>
              <td class="border-0 text-end"> $9,513.12 </td>
            </tr>
            <tr class="no-stripe">
              <td class="border-0"></td>
              <td class="border-0"></td>
              <th class="border-0 text-end"> TOTAL </th>
              <td class="border-0 text-end"> $10,000.00 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>
</body>
</html>

这样修改后，最后两行的背景就会变成纯净的白色，完全不受条纹样式的影响，和你想要的效果一致啦～

内容来源于stack exchange