1. Toy模板网首页
  2. > Toy博客

Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）

9月前 作者：我是一颗好李子 分类：Toy博客 阅读(32) 违法举报

这篇具有很好参考价值的文章主要介绍了Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

       在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。

bootstrap表格,Bootstrap,bootstrap,前端,html

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。

Bootstrap对表格进行了优化，通过给<table>元素应用.table类样式便可以得到一个优化的基本的表
格。

1.基本实例
例:给<table>添加.table类样式，显示优化后的表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html
 

2.表头选项

 例:给表头<thead>添加.thead-light类样式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead class="thead-light">
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

 结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html

3.条纹状表格

例:给<table>添加.table-striped类样式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-striped">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html
 

4.带边框的表格

例：给<table>元素添加.table-bordered类样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

 结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html

5.无边框的表格

例：给<table>元素添加.table-boardeless类样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-borderless">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

 结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html

 6.鼠标指针悬停

例：给<table>元素添加.table-hover类样式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-hover">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html

7.紧凑表格

例：给<table>元素添加.table-sm类样式。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">学号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">专业</th>
                    <th scope="col">课程</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>21090401001</td>
                    <td>李莉</td>
                    <td>计算机科学与技术</td>
                    <td>操作系统</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>21090401002</td>
                    <td>张雷</td>
                    <td>计算机科学与技术</td>
                    <td>操作系统</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>21090401003</td>
                    <td>周冰</td>
                    <td>计算机科学与技术</td>
                    <td>操作系统</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

 结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html

8.状态类

       Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。
       状态类设置的是<tr>、<td>或<th>元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。

例：表格背景颜色示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">专业</th>
						<th scope="col">课程</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-success">
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-active">
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>张雷</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-primary">
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-warning">
						<th scope="row">4</th>
						<td>21090401004</td>
						<td>王穗</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-danger">
						<th scope="row">5</th>
						<td>21090401005</td>
						<td>周利</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-info">
						<th scope="row">6</th>
						<td>21090401006</td>
						<td>何琪</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					<tr class="table-secondary">
						<th scope="row">7</th>
						<td>21090401007</td>
						<td>付伟</td>
						<td>计算机科学与技术</td>
						<td>操作系统</td>
					</tr>
					
				</tbody>
			</table>
		</div>
	</body>
</html>

结果图：

bootstrap表格,Bootstrap,bootstrap,前端,html
 9.响应式表格

       通过把任意的table包装在.table-responsive类内，可以创建响应式表格。即当表格水平溢出时出现水平滚动条。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>班级</th>
						<th>语文</th>
						<th>数学</th>
						<th>英语</th>
						<th>物理</th>
						<th>化学</th>
						<th>生物</th>
						<th>地理</th>
						<th>政治</th>
						<th>历史</th>
					</tr>
					<tbody>
						<tr>
							<th>1</th>
							<th>张三</th>
							<th>3班</th>
							<th>80</th>
							<th>90</th>
							<th>92</th>
							<th>85</th>
							<th>92</th>
							<th>80</th>
							<th>85</th>
							<th>90</th>
							<th>85</th>
						</tr>
					</tbody>
				</thead>
			</table>
		</div>
	</body>
</html>

 结果图：

小屏幕效果：

bootstrap表格,Bootstrap,bootstrap,前端,html

大屏幕效果：

bootstrap表格,Bootstrap,bootstrap,前端,html文章来源地址https://www.toymoban.com/news/detail-667201.html

到了这里，关于Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue3 + Ant Design 实现双表头表格（横向表头+纵向表头）

    vue3 + Ant Design 实现双表头表格（横向表头+纵向表头）

     一、要实现的效果（ 纵向固定表头的表格，横向表头数量动态化 ） 二、这是后台返回的数据格式（以企业为数组，每个企业里有个站点数组pointFactors）   三、代码实现步骤   （1）定义纵向固定表头 （2）动态生成横向表头（ 从接口获取数据 ）   （3）循环原始数据，生

    2024年02月04日
    浏览(50)
  • WPF多表头表格实现

    WPF多表头表格实现

    前言 多表头表格是一个常见的业务需求，然而WPF中却没有默认实现这个功能，得益于WPF强大的控件模板设计，我们可以通过修改控件模板的方式自己实现它。 一、需求分析    下图为一个典型的统计表格，统计1-12月的数据。       此时我们有一个需求，需要将月份按季度划

    2024年04月22日
    浏览(27)
  • Vue+el-table 修改表格 单元格横线边框颜色及表格空数据时边框颜色

    Vue+el-table 修改表格 单元格横线边框颜色及表格空数据时边框颜色

    找到对应的css样式进行修改

    2024年04月11日
    浏览(59)
  • Winform中DatagridView 表头实现一个加上一个checkBox，实现全选选项功能

    Winform中DatagridView 表头实现一个加上一个checkBox，实现全选选项功能

    点击checkBox1或者直接在第一列列表头点击即可实现 我的datagridview叫dgv 我在datagridview已经默认添加了一个DataGridViewCheckBoxColumn ，勾选时value为1，不勾选时value为0 拖动组件，然后绑定事件 点击事件 事件代码： 这种需要自己弄一个DataGridViewCheckBoxColumn 文件位置 详细代码 ： ==D

    2024年02月13日
    浏览(44)
  • Vue+Element-ui实现表格嵌套表格（表头不同）

    Vue+Element-ui实现表格嵌套表格（表头不同）

    data中integrateList根据后端返回的json数据确定，其格式为：

    2024年02月14日
    浏览(67)
  • 【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并

    【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并

    table ：中每个对象代表一张表格； table_header ：表示表格表头数据； headerColor ：表示表格表头背景颜色； headerData ：表示表格表头内容数据； prop ：值为与 table_content 中对象属性对应,data_list中的avgMen对应的prop需为\\\"first.avgMen\\\"(这里跟获取对象的点语法相似)，如以下例子 label

    2024年04月10日
    浏览(56)
  • 自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

    自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮

    自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮 注意：表头插槽拿到的column 和内容插槽拿到的内容不一致，header插槽的label对应el-table-column的label，prop对应header插槽的property 效果：

    2024年02月06日
    浏览(37)
  • elementui表格实现顶部和左侧双表头

    elementui表格实现顶部和左侧双表头

    先上效果图  左边第一列的表头是咱们前端根据需要自定义的，常用于需要数据对比的场景。 后端返回的数据如下，就是常用的表格格式(这里是每个产品数据都是单独的接口调用的，前端做个聚合就好，dataList = [data1, data2] )：  我们先自定义左边一列，这里的key是根据后端

    2024年02月15日
    浏览(34)
  • HTML--CSS--边框、列表、表格样式

    HTML--CSS--边框、列表、表格样式

    属性： border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 取值为像素值 none 无样式 dashed 虚线 solid 实线 如示例： 为 div 设定了一个边框，虚线，宽度10像素，颜色是红色 效果： 另一写法：简写,将配置都写进 border里 ，效果是一样的 border-top

    2024年01月17日
    浏览(47)
  • 微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动（多种表格演练）

    微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动（多种表格演练）

    最近在做公司的项目需要到表格展示数据，但是微信小程序是没有原生table标签的，于是就百度各种搜...发现结构有类似的就粘过来修改，要善于学习和借鉴别人的经验使其变成为自己的东西，学无止境~ 在这里做下记录！ 1.左侧一列固定不动 2.右侧表格内容可以左右滚动 3

    2024年02月09日
    浏览(133)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包