Bootstrap CSS布局之表格

更新时间：2016年12月17日 09:32:14 作者：github_34514750

这篇文章主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

表格组件中，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
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js实现模态框拖拽
这篇文章主要为大家详细介绍了js实现模态框拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
简单实现JavaScript图片切换效果
这篇文章主要教大家如何简单实现JavaScript图片切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
WordPress 插件——CoolCode使用方法与下载
本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件。但 CoolCode 插件在它基础上修改了很多的内容。
2007-07-07
javascript实现简单的页面右下角提示信息框
本文给大家分享的是使用javascript实现简单的页面右下角提示信息框的方法和示例代码，有需要的小伙伴可以参考下。
2015-07-07
JS进阶之从多线程到Event Loop全面梳理
JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题
2023-05-05
前端实现（excel）xlsx文件预览的详细步骤
excel的预览库有不少,也都很强大,但是能很简单实现,下面这篇文章主要给大家介绍了关于前端实现（excel）xlsx文件预览的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
js用拖动滑块来控制图片大小的方法
这篇文章主要介绍了js用拖动滑块来控制图片大小的方法,实例分析了javascript使用鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
一起来学习TypeScript的类型
这篇文章主要为大家详细介绍了TypeScript的类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
JavaScript实现合并(归并)排序算法示例解析
这篇文章主要为大家介绍了JavaScript实现合并(归并)排序算法示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
npm淘宝镜像修改讲解
这篇文章主要介绍了npm淘宝镜像修改讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08

Bootstrap CSS布局之表格

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具