CSS 移除带有行条纹和突出显示的 Twitter Bootstrap 表格行

在本文中，我们将介绍如何使用 CSS 移除 Twitter Bootstrap 表格行的行条纹和突出显示。作为前端开发人员，我们经常使用 Bootstrap 来创建响应式的和美观的网站。Bootstrap 表格提供了一种简单而有用的方式来呈现数据。然而，有时我们希望移除默认的行条纹和行的突出显示，以满足特定设计需求。

阅读更多：CSS 教程

了解 Bootstrap 表格的行条纹

在使用 Bootstrap 的表格时，行条纹是默认启用的。这意味着奇偶行将以不同的背景色显示，以提高可读性和可视化效果。

示例代码如下所示：

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Mark</td>
      <td>Johnson</td>
      <td>@markjohnson</td>
    </tr>
  </tbody>
</table>

上述代码中的 table-striped 类将为表格的奇数行和偶数行添加不同的背景色。

移除行条纹

为了移除表格行的行条纹效果，我们只需简单地去除相应的 CSS 类即可。

在上述示例中，我们只需从 <table> 元素的类属性中删除 table-striped 类即可。修改后的代码如下：

<table class="table">
  <!-- ... -->
</table>

这样做后，表格行的背景色将统一，不再有奇偶行颜色的区别。

移除行的突出显示

除了行条纹效果，Bootstrap 表格还会以鼠标悬停在行上时突出显示该行。

要移除这种突出显示效果，我们可以使用 CSS 来覆盖默认样式。通过设置自定义的 :hover 选择器样式，我们可以将行的背景色设置为与未悬停时相同的颜色。

以下是示例代码：

<style>
  .table-hover tbody tr:hover td,
  .table-hover tbody tr:hover th {
    background-color: initial;
  }
</style>

在上述代码中，我们使用 .table-hover tbody tr:hover td 和 .table-hover tbody tr:hover th 选择器来覆盖了默认的鼠标悬停样式，并将背景色设置为 initial，以回到默认的背景色。

完整示例

下面是移除行条纹和突出显示效果的完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .table-hover tbody tr:hover td,
    .table-hover tbody tr:hover th {
      background-color: initial;
    }
  </style>
  <title>Remove Table Row Highlight</title>
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jane</td>
        <td>Smith</td>
        <td>@janesmith</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Mark</td>
        <td>Johnson</td>
        <td>@markjohnson</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

通过将上述代码复制到 HTML 文件中，并在浏览器中打开，您将会看到移除行条纹和突出显示效果后的表格。