Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Bootstrap】005-全局样式:表格

【Bootstrap】005-全局样式:表格

作者头像
訾博ZiBo
发布于 2025-01-06 07:47:05
发布于 2025-01-06 07:47:05
21500
代码可运行
举报
运行总次数:0
代码可运行

一、基本实例

1、说明

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</body>
</html>
运行结果:

二、条纹状表格

1、说明

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式;

跨浏览器兼容性:

条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table table-striped">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</body>
</html>
运行结果:

三、带边框的表格

1、说明

添加 .table-bordered 类为表格和其中的每个单元格增加边框;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table table-bordered">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</body>
</html>
运行结果:

四、鼠标悬停

1、说明

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table table-bordered table-hover">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</body>
</html>
运行结果:

五、紧缩表格

1、说明

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table table-bordered table-condensed">
		  <caption>Optional table caption.</caption>
		  <thead>
			<tr>
			  <th>#</th>
			  <th>First Name</th>
			  <th>Last Name</th>
			  <th>Username</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <th scope="row">1</th>
			  <td>Mark</td>
			  <td>Otto</td>
			  <td>@mdo</td>
			</tr>
			<tr>
			  <th scope="row">2</th>
			  <td>Jacob</td>
			  <td>Thornton</td>
			  <td>@fat</td>
			</tr>
			<tr>
			  <th scope="row">3</th>
			  <td>Larry</td>
			  <td>the Bird</td>
			  <td>@twitter</td>
			</tr>
		  </tbody>
		</table>
	</body>
</html>
运行结果:

六、状态类

1、说明

通过这些状态类可以为行或单元格设置颜色;

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<table class="table">
		      <thead>
		        <tr>
		          <th>#</th>
		          <th>Column heading</th>
		          <th>Column heading</th>
		          <th>Column heading</th>
		        </tr>
		      </thead>
		      <tbody>
		        <tr class="active">
		          <th scope="row">1</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr>
		          <th scope="row">2</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr class="success">
		          <th scope="row">3</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr>
		          <th scope="row">4</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr class="info">
		          <th scope="row">5</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr>
		          <th scope="row">6</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr class="warning">
		          <th scope="row">7</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr>
		          <th scope="row">8</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		        <tr class="danger">
		          <th scope="row">9</th>
		          <td>Column content</td>
		          <td>Column content</td>
		          <td>Column content</td>
		        </tr>
		      </tbody>
		    </table>
		<table class="table">
			<!-- On rows -->
			<!-- <tr class="active">活跃</tr>
			<tr class="success">成功</tr>
			<tr class="warning">警告</tr>
			<tr class="danger">危险</tr>
			<tr class="info">信息</tr> -->
			
			<!-- On cells (`td` or `th`) -->
			<tr>
			  <td class="active">活跃</td>
			  <td class="success">成功</td>
			  <td class="warning">警告</td>
			  <td class="danger">危险</td>
			  <td class="info">信息</td>
			</tr>
		</table>
	</body>
</html>
运行结果:

3、向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现,并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此,请确保通过颜色而赋予的不同意义可以通过内容本身来表达(即在相应行或单元格中的可见的文本内容);或者通过包含额外的方式 -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来;

七、响应式表格

1、说明

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失;

垂直方向的内容截断:

响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。特别是,也可以截断下拉菜单和其他第三方组件;

Firefox 和 fieldset 元素:

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决,但是以下代码并未集成在 Bootstrap 中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

更多信息请参考 this Stack Overflow answer.

2、演示

代码演示:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<div class="table-responsive">
		      <table class="table">
		        <thead>
		          <tr>
		            <th>#</th>
		            <th>Table heading</th>
		            <th>Table heading</th>
		            <th>Table heading</th>
		            <th>Table heading</th>
		            <th>Table heading</th>
		            <th>Table heading</th>
		          </tr>
		        </thead>
		        <tbody>
		          <tr>
		            <th scope="row">1</th>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		          </tr>
		          <tr>
		            <th scope="row">2</th>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		          </tr>
		          <tr>
		            <th scope="row">3</th>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		            <td>Table cell</td>
		          </tr>
		        </tbody>
		      </table>
		    </div>
	</body>
</html>
运行结果:
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Bootstrap】017-组件:面板、嵌入内容、Well
虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件;
訾博ZiBo
2025/01/06
1570
【Bootstrap】017-组件:面板、嵌入内容、Well
4.表格-HTML基础
当然,对于表头单元格,我有可能会使用 td 来代替 th,但不建议这样做。 因为在HTML语义化中了解到:学习 HTML 的目的就是在需要的地方使用恰当的标签(也就是语义化)。
见贤思齊
2020/09/28
1.5K0
4.表格-HTML基础
Bootstrap表格示例
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/16
7260
Bootstrap表格示例
【Bootstrap】008-全局样式:图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放;
訾博ZiBo
2025/01/06
1270
【Bootstrap】008-全局样式:图片
【Bootstrap】002-全局CSS样式-概览和栅格系统
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型;
訾博ZiBo
2025/01/06
2280
【Bootstrap】002-全局CSS样式-概览和栅格系统
bootstrap 表格 1
表格:class table caption thread tr th tbody tr td
用户5760343
2022/01/10
4860
bootstrap 表格 1
【Bootstrap】004-全局样式:代码
还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条;
訾博ZiBo
2025/01/06
1030
【Bootstrap】004-全局样式:代码
bootstrap
花了一天时间学了下bootstrap入门,想必大家用css写前端页面的时候都很痛苦,bootstrap就是来解决这个问题的,它封装了css的很多样式,开发的时候直接拿来用就可以了,提高了开发效率
用户3112896
2019/09/26
3.6K0
bootstrap
JavaWeb——一文快速入门BootStrap(栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战)
BootStrap是一个前端开发的框架,Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Winter_world
2020/09/25
2.6K0
JavaWeb——一文快速入门BootStrap(栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战)
表格使用总结
细线表格: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>细线表格</title> <style type="text/css"> table{ border-collapse:collapse; } td{height:30px;width:50px;border-spacing:0px;border-collapse:collapse;} </style> </head> <body> <h4>这个表格没
windseek
2018/06/14
4710
python测试开发django-173.bootstrap实现table表格行内编辑
网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂。 我想实现的需求很简单,在页面上写个简单的table表格,能删除行,添加行,点击每一个报告能直接编辑就行,不需要那些花里胡哨的功能。 最后还是自己基于bootstrap写了一个table报告的在线编辑功能。
上海-悠悠
2021/11/23
1.4K0
bootstrap5基本使用
container是最基本的布局。 给一个元素的class赋值为container之后,如果显示屏幕小于576,元素将要横向占满屏幕,但是大于576小于576像素的时候,宽度恒定为540,。就是说你的屏幕很宽的时候,元素永远不会横向占满整个屏幕,与边距有孔隙。但是赋值为.container-fluid的时候,元素永远横向占满屏幕,不会留有孔隙。
Crayon鑫
2023/10/10
8840
bootstrap5基本使用
BootStrap的学习与使用
文章链接: http://silentcow.cn/2020/08/06/BootStrap/
Rochester
2020/09/01
1.6K0
【Bootstrap】013-组件:导航、导航条、路径导航
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式;
訾博ZiBo
2025/01/06
5700
【Bootstrap】013-组件:导航、导航条、路径导航
第6章 列表与表格——让网站更规整
HTML5+CSS3+JavaScript Web 前端开发案例教程(慕课版),微信读书中找到的学习Web前端书籍,第6章开始啦,耶(^-^)V
用户8928967
2021/08/20
5910
第6章 列表与表格——让网站更规整
【Bootstrap】009-全局样式:辅助类
通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样;
訾博ZiBo
2025/01/06
2110
【Bootstrap】009-全局样式:辅助类
7.表格样式-CSS基础
一、表格标题位置(caption-side) 默认情况下,表格标题是在表格的上方。 在CSS中,可以使用caption-side属性来定义表格标题的位置。 caption-side属性是在table元素中定义(也可以在caption元素中定义)。 1.标题位置 (1)语法格式 caption-side:取值; ① caption-side属性值 属性值 说明 top 标题在顶部(默认) bottom 标题在底部 ② 示例 Ⅰ.例1 <!DOCTYPE html> <html xmlns="htt
见贤思齊
2020/10/29
1.5K0
7.表格样式-CSS基础
【Bootstrap】007-全局样式:按钮
为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式;
訾博ZiBo
2025/01/06
2600
【Bootstrap】007-全局样式:按钮
【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body>
用户3055976
2018/09/12
5940
bootstrap 表格 条纹
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
用户5760343
2022/01/10
5310
bootstrap 表格 条纹
相关推荐
【Bootstrap】017-组件:面板、嵌入内容、Well
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档