<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 响应式表格</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="table-responsive">

            <table class="table">

                <caption>响应式表格布局</caption>

                <thead>

                    <tr>

                        <th>产品</th>

                        <th>付款日期</th>

                        <th>状态</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>产品1</td>

                        <td>23/11/2013</td>

                        <td>待发货</td>

                    </tr>

                    <tr>

                        <td>产品2</td>

                        <td>10/11/2013</td>

                        <td>发货中</td>

                    </tr>

                    <tr>

                        <td>产品3</td>

                        <td>20/10/2013</td>

                        <td>待确认</td>

                    </tr>

                    <tr>

                        <td>产品4</td>

                        <td>20/10/2013</td>

                        <td>已退货</td>

                    </tr>

                </tbody>

            </table>

        </div>      

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：响应式图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：联合使用所有表格类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：让表格更加紧凑

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内的任一行启用鼠标悬停状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. MYSQL双查询错误1

    一.基础知识 开始讲解MYSQL双查询错误之前,我们先了解一下双查询语句以及需要使用到的几个数据库函数和GROUP BY语句 1. 双查询语句 先了解一下什么是子查询,子查询就是嵌入第一层select ...

  2. Django项目配置数据库时，已安装mysqlclient，却提示 Did you install mysqlclient错误，后右报错ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3

    错误信息如下: 解决方案是: 找到自己的项目文件夹下的__init__.py  添加如下代码 解决这个问题后,右报错django2.2/mysql ImproperlyConfigured: mysq ...

  3. ZOJ1008 Gnome Tetravex

    DFS+剪枝~ #include<bits/stdc++.h> using namespace std; ][]; int N; int cnt; ]; ]; unordered_map& ...

  4. 转专业后补修C语言的一些体会(3)

    1.指针:指针是C语言最为强大的工具之一,有着很多优点,比如可以改善子程序的效率,为动态数据结构提供支持,为C的动态内存分配系统提供支持,为函数提供修改变量值的手段.但指针的使用十分困难.会出现很多意 ...

  5. k sum 问题系列

    转自:http://tech-wonderland.net/blog/summary-of-ksum-problems.html (中文旧版)前言: 做过leetcode的人都知道, 里面有2sum, ...

  6. oracle误操作表数据--回退（闪回）被提交后的数据

    // 查询该时间段 这个表的状态 (就是表状态正常的时刻 下面的时间仅用于举例) select * from 表名 as of timestamp to_timestamp('2019-09-26 1 ...

  7. C++ STL之unordered_map和unordered_set的使⽤

    写在最前面,本文摘录于柳神笔记: unordered_map 在头⽂件 #include <unordered_map> 中, unordered_set 在头⽂件 #include &l ...

  8. 策略模式，重构if-else

    最近完成了我们公司的公众号开发,在微信消息路由选择的时候一开始都是用if-else 来判断,后面if-else月写越多显得十分的乱.在网上简单查了一下解决方法,果然有不少干货,感觉最经典最简洁的还是使 ...

  9. SVN中如何创建共享文件夹

    http://wenku.baidu.com/link?url=E8tC1idSdTABc3JzyqGYF8OXakDTIF_yWp8BvFqSX5dgcpkbm8Z57ursZtLpjmQAEABM ...

  10. redhat7.6 crontab 服务,周期性任务

    系统默认安装开启 systemctl status crond.service 查看周期性任务(最多每隔1分钟做周期性任务) crontab   -l 系统自身的周期性任务 配置周期性任务 cront ...