table-bordered的多个方面阐述

小蓝 • 2024-11-25 05:49 • 编程

一、基本介绍

在Bootstrap框架中，table-bordered是table表格的一个重要属性，它可以为table添加边框。table-bordered会把table的每个单元格和行之间添加1像素的实线边框，从而让table更加美观易读。除此之外，table-bordered还有其他的特性和应用场景。

二、用法示例

table-bordered是Bootstrap中table的一个属性，使用CSS样式表即可轻松添加。以下是一段代码示例：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

上面的代码中，使用了table-bordered属性，并且在table标签中添加了class="table"，这是Bootstrap table的基础样式，使得table能够具有基础功能。

三、其他特性

1. 去掉单元格之间的间隔线

有些情况下，我们可能需要去掉单元格之间的间隔线，可以使用以下代码：

.table-bordered td, .table-bordered th {
  border: none;
}

这样就可以把所有单元格和表头的边框去掉，使得table看起来更加整洁，可读性也更高。

2. 添加额外的边框线

有时候，我们需要给table的某些单元格或行添加额外的边框线，可以使用CSS的border属性来实现。以下是一段示例代码：

.table-bordered.extra-border td, .table-bordered.extra-border th {
  border: 2px solid #ccc;
}
.table-bordered.extra-border tr:first-child th {
  border-top: none;
}
.table-bordered.extra-border td:first-child,
.table-bordered.extra-border th:first-child {
  border-left: none;
}
.table-bordered.extra-border td:last-child,
.table-bordered.extra-border th:last-child {
  border-right: none;
}

以上代码会给table中class="table-bordered extra-border"的单元格和表头添加2像素的实线边框，同时保留原有的1像素边框。其中，tr:first-child和td:first-child/th:first-child是用来去除第一行和第一列的一像素边框的。

3. 添加自定义颜色的边框

table-bordered默认使用的颜色是#ddd，可以通过自定义CSS样式来改变颜色。以下是一段示例代码：

.table-bordered.custom-border td, .table-bordered.custom-border th {
  border-color: #f0ad4e;
}

以上代码会把table中class="table-bordered custom-border"的单元格和表头边框的颜色改为#f0ad4e，即深黄色。

4. 响应式表格

Bootstrap提供了一种响应式表格的实现方式，使得table能够根据不同的设备尺寸自适应调节。以下是一段示例代码：

<div class="table-responsive">
  <table class="table table-bordered">
    ...
  </table>
</div>

以上代码会把table放入class="table-responsive"的容器中，当设备尺寸小于一定值时，table会自动缩小并出现横向滚动条，以保证内容的可读性。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183710.html