首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

BootstrapCSS布局之表格

作者：phba | 来源：互联网 | 2022-02-26 16:16
这篇文章主要为大家详细介绍了BootstrapCSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

表格组件中，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)水平滚动，大屏幕上水平滚动条消失


 

 





//源码
.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
 }
}

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


推荐阅读
  • 容器

    阿里Java面试全解析：从技术面到HR面的详细攻略

    本文作者分享了在阿里巴巴获得实习offer的经历，包括五轮面试的详细内容和经验总结。其中四轮为技术面试，一轮为HR面试，涵盖了大量的Java技术和项目实践经验。 ... [详细]
  • 容器

    深入理解C++ map的删除与交换操作

    本文详细介绍了C++中map容器的多种删除和交换操作，包括clear、erase、swap、extract和merge方法，并提供了完整的代码示例。 ... [详细]
  • html

    Python 内存管理机制详解

    Python 内存管理机制详解
    本文深入探讨了Python的内存管理机制，涵盖了垃圾回收、引用计数和内存池机制。通过具体示例和专业解释，帮助读者理解Python如何高效地管理和释放内存资源。 ... [详细]
  • html

    深入解析Java枚举及其高级特性

    深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景，并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual)，欢迎Star并持续关注。 ... [详细]
  • build

    Nginx 配置反向代理至本地 Docker 容器

    本文探讨如何配置 Nginx 以将传入请求反向代理到运行在本地绑定端口上的 Docker 容器，并解决常见的路径重定向问题。 ... [详细]
  • console

    12月16日JavaScript变量、函数、流程、循环等***线上九期班

    12月16日JavaScript变量、函数、流程、循环等***线上九期班
    12月16日JavaScript变量、函数、流程、循环等***线上九期班 ... [详细]
  • html

    深入解析Serverless架构模式

    深入解析Serverless架构模式
    本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构，探讨Serverless如何简化应用开发与运维流程，并介绍当前主流的Serverless平台。 ... [详细]
  • html

    技术领域值得关注的优质自媒体

    本月初，我们为大家推荐了一系列精选书单，助力大家提升技术水平。月底，我们将介绍几位行业大牛，帮助大家找到人生导师。InfoQ一直致力于为用户提供有价值的资源和支持。 ... [详细]
  • html

    Docker入门实践：运行首个镜像与容器

    本文详细介绍了如何使用Docker运行最简单的镜像，并创建第一个容器。通过具体的操作步骤和命令解释，帮助初学者快速上手Docker。完整课程请点击：Docker入门教程。 ... [详细]
  • html

    深入解析SpringMVC核心组件：DispatcherServlet的工作原理

    深入解析SpringMVC核心组件：DispatcherServlet的工作原理
    本文详细探讨了SpringMVC的核心组件——DispatcherServlet的运作机制，旨在帮助有一定Java和Spring基础的开发人员理解HTTP请求是如何被映射到Controller并执行的。文章将解答以下问题：1. HTTP请求如何映射到Controller；2. Controller是如何被执行的。 ... [详细]
  • build

    深入解析Spring启动过程

    深入解析Spring启动过程
    本文详细介绍了Spring框架的启动流程，帮助开发者理解其内部机制。通过具体示例和代码片段，解释了Bean定义、工厂类、读取器以及条件评估等关键概念，使读者能够更全面地掌握Spring的初始化过程。 ... [详细]
  • build

    PostgreSQL 最新动态 —— 2022年4月6日

    PostgreSQL 最新动态 —— 2022年4月6日
    了解 PostgreSQL 社区的最新进展和技术分享 ... [详细]
  • html

    精选设计感强的网站模板推荐

    本文汇集了一系列具有强烈设计感的网站模板，特别是来自知名平台WrapBootstrap的响应式网站模板。这些模板不仅美观，而且功能强大，适合各种类型的网站建设需求。 ... [详细]
  • layout

    深入解析 Android 值动画实现细节

    本文详细介绍了如何在 Android 中使用值动画（ValueAnimator）来动态调整 ImageView 的高度，并探讨了相关的关键属性和方法，包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]
  • console

    docker镜像重启_docker怎么启动镜像

    docker镜像重启_docker怎么启动镜像dock ... [详细]
author-avatar
phba
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有