Bootstrap CSS布局之表格


Posted in Javascript onDecember 17, 2016

表格组件中,BootStrap提供了
1种基础.table样式
4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed)
1种支持响应式布局的.table-responsive

table样式

//源码
table {
 background-color: transparent;
}
caption {
 padding-top: 8px;
 padding-bottom: 8px;
 color: #777;
 text-align: left;
}
th {
 text-align: left;
}
.table {
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
 padding: 8px;
 line-height: 1.42857143;
 vertical-align: top;
 border-top: 1px solid #ddd;
}
.table > thead > tr > th {
 vertical-align: bottom;
 border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
 border-top: 0;
}
.table > tbody + tbody {
 border-top: 2px solid #ddd;
}
.table .table {
 background-color: #fff;
}

table.striped样式?带背景条纹的表格

//源码
.table-striped > tbody > tr:nth-of-type(odd) {
 background-color: #f9f9f9;
}

table.bordered样式?带边框的表格

为表格所有的单元格提供1条1像素宽的边框

//源码
.table-bordered {
 border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
 border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
 border-bottom-width: 2px;
}

table.hover样式?鼠标悬停高亮的表格

table.condensed样式?紧凑型的表格

//源码
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
 padding: 5px;
}

行级元素样式

Bootstrap为表格的tr元素提供了5种额外的样式,用于控制tr的背景颜色。active、success、info、warning、danger

//源码
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
 background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
 background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
 background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
 background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
 background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
 background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
 background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
 background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
 background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
 background-color: #ebcccc;
}

响应式表格

随着响应式设计的大量需求,Bootstrap为表格提供了一个响应式设计的容器(.table-responsive),将.table-responsive样式包装在.table样式外部即可创建响应式表格
在小屏幕(<768px)水平滚动,大屏幕上水平滚动条消失

<div class="table-responsive">
 <table class="table">
 </table>
</div>
//源码
.table-responsive {
 min-height: .01%;
 overflow-x: auto;
}
//把原有.table样式得底部外边距margin-bottom从20px改成了0px,目的是消除滚动条带来的上下高度差
//并在.table-responsive样式上设置了一个margin-bottom:15px,避免和容器外部的下一个元素重叠
@media screen and (max-width: 767px) {
 .table-responsive {
 width: 100%;
 margin-bottom: 15px;
 overflow-y: hidden;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 border: 1px solid #ddd;
 }
 .table-responsive > .table {
 margin-bottom: 0;
 }
 .table-responsive > .table > thead > tr > th,
 .table-responsive > .table > tbody > tr > th,
 .table-responsive > .table > tfoot > tr > th,
 .table-responsive > .table > thead > tr > td,
 .table-responsive > .table > tbody > tr > td,
 .table-responsive > .table > tfoot > tr > td {
 white-space: nowrap;
 }
 .table-responsive > .table-bordered {
 border: 0;
 }
 //可以看到table-responsive给自己加了一个1px的外边框,如果在table上在使用table-bordered样式得话,就会和表格的外边框重合,就会变粗,所以进行了以下代码的编写
 .table-responsive > .table-bordered > thead > tr > th:first-child,
 .table-responsive > .table-bordered > tbody > tr > th:first-child,
 .table-responsive > .table-bordered > tfoot > tr > th:first-child,
 .table-responsive > .table-bordered > thead > tr > td:first-child,
 .table-responsive > .table-bordered > tbody > tr > td:first-child,
 .table-responsive > .table-bordered > tfoot > tr > td:first-child {
 border-left: 0;//所有tr的第一个单元格(最左边的一列)的左边框设置为0px
 }
 .table-responsive > .table-bordered > thead > tr > th:last-child,
 .table-responsive > .table-bordered > tbody > tr > th:last-child,
 .table-responsive > .table-bordered > tfoot > tr > th:last-child,
 .table-responsive > .table-bordered > thead > tr > td:last-child,
 .table-responsive > .table-bordered > tbody > tr > td:last-child,
 .table-responsive > .table-bordered > tfoot > tr > td:last-child {
 border-right: 0;//所有tr的最后一个单元格(最右边的一列)的左边框设置为0px
 }
 .table-responsive > .table-bordered > tbody > tr:last-child > th,
 .table-responsive > .table-bordered > tfoot > tr:last-child > th,
 .table-responsive > .table-bordered > tbody > tr:last-child > td,
 .table-responsive > .table-bordered > tfoot > tr:last-child > td {
 border-bottom: 0;//最后一行tr里的单元格的底部边框设置为0px
 }
}

Bootstrap CSS布局之表格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
Bootstrap CSS布局之代码
Dec 17 #Javascript
基于js实现二级下拉联动
Dec 17 #Javascript
文件上传的几个示例分享【推荐】
Dec 16 #Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 #Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 #Javascript
JS搜狐面试题分析
Dec 16 #Javascript
JS重载实现方法分析
Dec 16 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
php检测useragent版本示例
2014/03/24 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
js实现简单的计算器功能
2017/01/16 Javascript
js实现拖拽功能
2017/03/01 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python条件和循环的使用方法
2013/11/01 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python实现简易数码时钟
2021/02/19 Python
python实现图片彩色转化为素描
2019/01/15 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
《梅兰芳学艺》教学反思
2014/02/24 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2014年工程工作总结
2014/11/25 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015政治思想表现评语
2015/03/25 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书