BootStrap的table标签的使用

最新推荐文章于 2025-07-03 09:48:53 发布

哎呦脑壳疼

最新推荐文章于 2025-07-03 09:48:53 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lovey030821/article/details/83376409

BootStrap 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Bootstrap框架的table类来美化HTML表格的显示效果，包括添加斑马纹、边框、鼠标悬停效果以及不同行类型的样式设置。

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

首先来看直接的bs的table属性

<table class="table">
		<tr>
			<td>姓名</td>>
			<td>语文</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		<tr>
			<td>小王</td>
			<td>150</td>
			<td>150</td>
			<td>150</td>
		</tr>
		<tr>
			<td>小名</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>

效果为

接着我们继续叠加样式，

<!--添加斑马纹效果-->
<table class="table table-striped">

添加边框，和鼠标悬停效果，当鼠标移到对应的表格上有悬停效果

	<table class="table table-striped table-bordered table-hover">

w我们也可以给每一行设置不同的类型，有不同的效果

<tr class="warning">
			<td>姓名</td>>
			<td>语文</td>
			<td>数学</td>
            <td>英语</td>
		</tr>
		<tr class="danger">
			<td>小王</td>
			<td>150</td>
			<td>150</td>
			<td>150</td>
		</tr>
		<tr class="success">
			<td>小名</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>