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

最新推荐文章于 2023-11-27 17:15:14 发布
最新推荐文章于 2023-11-27 17:15:14 发布
阅读量233 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/108917350
版权

一、基本实例

1、说明

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

 

2、演示

代码演示：

<!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、演示

代码演示：

<!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、演示

代码演示：

<!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、演示

代码演示：

<!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、演示

代码演示：

<!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、演示

代码演示：

<!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 中：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

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

 

2、演示

代码演示：

<!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>

运行结果：

 

 

 

 

 

訾博ZiBo
关注
专栏目录
全局CSS样式——代码+表格
weixin_46252857的博客
05-29 311
需要标记的代码一行解决，和带你看看怎么用Bootstrap做出来的表格如何的好看且省代码 1、代码 01、内联代码：通过<code>标签包裹内联样式的代码片段 02、 用户输入：通过<kbd>标签标记用户通过键盘输入的内容 03、 基本代码块：           多行代码可以使用<pre>标签       &
css开头的全局标准代码
weixin_34109408的博客
11-02 517
/*全局样式*/ *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0;} img,input{border:none;vertical-align:middle;} body{font-family:Tahoma,Arial,Helve...
bootstrap全局CSS中表格的样式
weixin_45847162的博客
05-05 379
基础表格 <table class="table"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> ...
Bootstarp全局样式之表格
weixin_45846805的博客
05-04 228
很多人不喜欢表格布局，但是在现实开发中表格布局还是十分常见的，个人觉得在简单的布局表格布局韩式十分实用的。 下面看看Bootstarp中给出的表格： 基本实例： 为任意table标签添加.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 <div class="container"> <table class="table...
160Vue工程化2-全局样式表global.css
Gy_9543的博客
08-11 304
05-bootstrap-CSS样式-表格、表单
记录java学习日常~
05-25 211
为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
Bootstrap 全局CSS样式：表格类的使用
WangMin@汪末末
08-30 1567
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 基本实例 给任意 <table> 标签添加类 .table 可以给表格添加基本的样式 — 少量的内补（padding）和水平方向的分隔线。 实例： <table class="table"> <tr> <th>#</th> <th>表格标题</th> <th>表格标
angularjs-bootstrap-skeleton:AngularJS-Bootstrap 骨架
06-19
3. **自定义主题**：Bootstrap 支持自定义主题，通过修改 SCSS 变量，轻松改变全局颜色、字体等样式。 在"angularjs-bootstrap-skeleton"项目中，你可能会找到以下关键文件和目录： - `index.html`：入口文件，...
全局css表
chaosama的博客
03-24 230
省去很多时间写重复的css .container {height: 100%; min-height: 100vh; display: flex;flex-direction: column; box-sizing: border-box; background: #f5f5f5;overflow-x:hidden;} view,text{font-size: 13px;} /* P...
【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码
谙忆-陈浩翔
01-17 4248
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签，c
12.2 全局CSS样式
Alex
03-03 387
实例：从堆叠到水平排列 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。 所有“列（column）必须放在 ” .row 内。 <!DOCTYPE html> <html lang="en"> <head> <meta...
全局CSS样式——排版
weixin_46252857的博客
05-29 378
Bootstrap样式可以使HTML页面更加美观，可以大大提高开发的效率，为我们省下不少的时间去调编码 页面主体： Bootstrap将全局font-size设置为14px,line-height设置为20px,段落行高设置为10px,颜色设置为#333[通过F12查看] 段落突出显示：通过.lead类让段落突出显示 <p class="lead"></p> 标题： 标签：<h1><h6> 副标题：在<h1><small>副标题
Bootstrap框架使用（安装，全局样式，组件，插件）
谢谢你的关注
07-24 781
Bootstrap框架使用（安装，全局样式，组件，插件）
Bootstrap v5版本的HTML模板
最新发布
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
11-27 641
一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。标签中，您可以添加您自己的HTML内容。
bootstrapTable的使用
汉堡请不要欺负面条
04-02 2009
一.参数配置 var $table; //初始化bootstrap-table的内容 function InitMainTable () { //记录页面bootstrap-table全局变量$table，方便应用 var queryUrl = '/TestUser/FindWithPager?rnd=' + Ma...
table的样式设置
m0_69502730的博客
01-31 1020
1、设置element ui table 的表头。2、设置 ----------的划入效果。3、设置table大小。
vue项目引入全局css
weixin_44111864的博客
11-18 4324
1.在assets文件夹中创建全局样式表css文件 2.在global.css文件中写入全局样式 /* 全局样式表 */ html,body{ width:100%; height:100%; margin:0; padding:0; } body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr...
css篇 理解margin与padding区别 padding详解
weixin_49393290的博客
11-24 571
效果图 代码 拿这个输入框为例，padding是指修这个输入框内的元素的样式，而margin是修改这一整个输入框的元素样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值