bootstrap--表格（table的各种样式）

最新推荐文章于 2025-04-08 08:50:44 发布

ShowTime_Shawn

最新推荐文章于 2025-04-08 08:50:44 发布

阅读量1.3w

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/ShowTime_Shawn/article/details/83113333

版权

本文详细介绍Bootstrap框架中表格的各种样式，包括基础表格、斑马线表格、带边框表格、鼠标悬停高亮表格、紧凑型表格及响应式表格。同时介绍了如何通过状态类设置行或单元格颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap--表格（table的各种样式）

Bootstrap 表格类样式

☑ .table：基础表格，为任意 <table> 添加基本样式 (只有横向分隔线)

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

1、“.table”主要有三个作用：

☑ 给表格设置了单元内距及底部边距margin-bottom:20px

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每个单元格顶部设置了一个1px的浅灰实线

样式图如下：

2、table-striped：斑马线表格

样式图如下：

3、table-bordered：带边框的表格

样式图如下：

4、table-hover：鼠标悬停高亮的表格

样式图如下：

5、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)

样式图如下：

6、table-responsive：响应式表格(当浏览器可视区域小于768px时，表格底部会出现水平滚动条；可视区域大于768px时，表格底部水平滚动条就会消失)

样式图如下：

7、综合应用

样式图如下：

源代码如下：

<div class="container">
	<h2>表格</h2>
	<p>联合使用所有表格类:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

Bootstrap的JS,CSS等我就不贴出来了，自行引入，具体可参考Bootstrap 中文网

8、状态类：这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.info	标识普通的提示信息或动作
.success	标识成功或积极的动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作