备注：最新Bootstrap手册：http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

将<table>标签添加class=‘table’ 类后的样式

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Table样式</title>

    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>

    <script src="~/bootstrap/js/bootstrap.js"></script>

</head>

<body>

    <table class="table">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody>

            <tr><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

</html>

我们可以看到，Table是可以自由缩放的（不是响应式，应该是流媒体式）

class='table  table-striped'  条纹状表格（隔行变色）

<body>

    <table class="table table-striped">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody>

            <tr><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

class="table table-bordered" 给表格添加边框

<body>

    <table class="table table-bordered">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody>

            <tr><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

class="table table-hover" 鼠标悬停变色

<body>

    <table class="table table-hover">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody>

            <tr><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

class="sr-only" 隐藏某一行

<body>

    <table class="table">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody id="abc">

            <tr class="sr-only"><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

在第一行的tr上使用了sr-only样式后，编号为001的那一行被隐藏了

状态类（主要做标记）

可以单独设置每一行的背景样式（总共有5中不同的样式可以选择）

<body>

    <table class="table">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody>

            <tr class="active"><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr class="success"><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr class="info"><td>003</td><td>杨过</td><td>24</td></tr>

            <tr class="warning"><td>004</td><td>黄老邪</td><td>54</td></tr>

            <tr class="danger"><td>005</td><td>欧阳锋</td><td>42</td></tr>

        </tbody>

    </table>

</body>

响应式表格

class="table-responsive 浏览器宽度小于768px时，表格出现边框。（注意：这个样式定义在表格的父元素上）

响应式表格就是当浏览器小于多少宽度或者高度的时候做出什么动作，例如当浏览器的的宽度小于768px的时候表格出现边框

<body class="table-responsive">

    <table class="table ">

        <thead>

            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>

        </thead>

        <tbody id="abc">

            <tr><td>001</td><td>郭靖</td><td>25</td></tr>

            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>

            <tr><td>003</td><td>杨过</td><td>24</td></tr>

        </tbody>

    </table>

</body>

Bootstrap学习4--Table样式（转载：https://blog.csdn.net/Fanbin168/article/details/53208869）的更多相关文章

  1. Mui本地打包笔记（一）使用AndroidStudio运行项目 转载 https://blog.csdn.net/baidu_32377671/article/details/79632411

    转载 https://blog.csdn.net/baidu_32377671/article/details/79632411 使用AndroidStudio运行HBuilder本地打包的Mui项目 ...

  2. AutoFac控制反转 转载https://blog.csdn.net/u011301348/article/details/82256791

    一.AutoFac介绍 Autofac是.NET里IOC(Inversion of Control,控制反转)容器的一种,同类的框架还有Spring.NET,Unity,Castle等.可以通过NuG ...

  3. 爬虫出现Forbidden by robots.txt（转载 https://blog.csdn.net/zzk1995/article/details/51628205）

    先说结论,关闭scrapy自带的ROBOTSTXT_OBEY功能,在setting找到这个变量,设置为False即可解决. 使用scrapy爬取淘宝页面的时候,在提交http请求时出现debug信息F ...

  4. MVC和WebApi 使用get和post 传递参数。 转载https://blog.csdn.net/qq373591361/article/details/51508806

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq373591361/article/details/51508806我们总结一下用js请求服务器的 ...

  5. 已知IP地址和子网掩码求出网络地址、广播地址、地址范围和主机数（转载https://blog.csdn.net/qq_39026548/article/details/78959089）

    假设IP地址为128.11.67.31,子网掩码是255.255.240.0.请算出网络地址.广播地址.地址范围.主机数.方法:将IP地址和子网掩码转化成二进制形式,然后进行后续操作. IP地址和子网 ...

  6. Scrapy框架的学习(6.item介绍以及items的使用（提前定义好字段名）)转载https://blog.csdn.net/wei18791957243/article/details/86259688

      在Scrapy框架中的items.py的作用   1.可以预先定义好要爬取的字段     items.py import scrapy     class TencentItem(scrapy.I ...

  7. scala学习（idea编译过程https://blog.csdn.net/guiying712/article/details/68947747）

    scala官网 https://www.scala-lang.org/ 菜鸟教程学习 http://www.runoob.com/scala/scala-basic-syntax.html w3sch ...

  8. jeecms 强大的采集功能优化 转载 https://blog.csdn.net/jeff06143132/article/details/7099003

    ========================================================= 没办法附件上传不了,AcquisitionSvcImpl.java类: //---- ...

  9. Mac OS X下把 /etc/sudoers 写错了怎么办？（转载https://blog.csdn.net/robertsong2004/article/details/53725285）

    重要的事情先说一下,首先为了回避这个问题,一定要用 visudo 来改 /etc/sudoers 文件. 问题描述: 1. 用  sudo vi 直接改 /etc/sudoers 并覆盖原文件. 2. ...

随机推荐

  1. 在web目录下 批量寻找配置文件信息

    dir /s /b *.php *.inc *.conf *.config >>list.txt" W4 I2 U+ N/ B6 K @0 r r8 ^ T00LS: _$ j! ...

  2. android 4.0 禁用系统home键

    2.2 禁用系统home键.这里不说了. 近期项目有一个需求,禁用系统的全部键.像menu, home, back.同一时候还要是想点击响应与view的弹出. 就是UI这部分要正常. back键我们自 ...

  3. 使用Cocos studio创建一个简单的project

    前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...

  4. 基于React的PC网站前端架构分析

    代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...

  5. Android下 布局加边框 指定背景色 半透明

    背景设置为自定义的shape文件: <!-- <?xml version="1.0" encoding="utf-8"?><shape ...

  6. PHP接收和发送XML数据(json也通用)

    一.接收xml数据, 使用php://input,代码如下: <?php $xmldata=file_get_contents("php://input"); $data=s ...

  7. macOS10.12部署sonarqube5.6.3

    所需安装包已全部上传云盘:https://pan.baidu.com/s/1i5LvOCd 密码:s47e 1. 安装mysql 下载云盘的dmg包,一路默认安装,注意:一定要记住最后一步弹出的默认密 ...

  8. IDC机房带宽突然暴涨问题！

    IDC机房带宽突然暴涨问题! 1[提出问题] [实际案例一] 凌晨3:00点某公司(网站业务)的一个IDC机房带宽流量突然从平时高峰期150M猛增至1000M,如下图: 该故障的影响:直接导致数百台服 ...

  9. NodeJS示例异步式(Asynchronous)IO与同步式Synchronous)IO

    理解IO      IO(Input/Output)通常是指计算机线程进行慈磁盘读写或者网络通信时的一种行为.   同步式(Synchronous)IO和异步式(Asynchronous )IO   ...

  10. JLink defective

    下载了最新的JLink V622g,打开JLink命令行后,提示以下信息 The connected J-Link is defective,Proper operation cannot be gu ...