一、基本介绍
在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会自动缩小并出现横向滚动条,以保证内容的可读性。