<!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. 【硬核教程】只需1秒—你也可以有自己的API文档

    Nothing is true. Everything is permitted. 写在前面 先聊聊为什么想到了要用Vuepress来代替原来写在Confluence上的文档. 大意是有个需要其他部门 ...

  2. centos 6.5 升级到 python2.7

    准备 centos6.5的python版本默认是2.6.6,可能有的时候我们需要升级到更高的版本,那就来动手升级下吧.我这里以2.7.8版本为例,根据实际需要选择升级版本即可. yum install ...

  3. python opencv：图像的一些属性与操作

    img = cv.imread(xxx) # 常用的有以下属性 type(img) # img的数据类型 img.shape # img的结构 img.size # img的大小 img.dtype ...

  4. 爬虫必备工具-chrome 开发者工具

    在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具 01 元素面板 通过元素(Element)面板,我们能查看发哦想抓取页面渲染内容所在的标签.使用什么 CSS 属性(例如 ...

  5. [LeetCode] 735. Asteroid Collision

    行星碰撞. 题意是给一个数组 asteroids,表示在同一行的行星.对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移 ...

  6. fastdfs下载文件自定义文件名称

    fdfs 存储节点storage安装nginx,修改nginx配置文件 location /group1/M00/ { root /fdfs/storage/data; if ($arg_attnam ...

  7. BUG搬运工：CSCun88303-CIMC Memory Leak : Can't SSH/HTTP to CIMC

    Symptom:Unable to SSH/HTTP to the CIMC of the C-series server, however the CIMC can be pinged. Also ...

  8. 如何判断WLC的FUS版本

    有些时候,我们在升级WLC的时候,被告知需要升级WLC的FUS,以防止某些漏洞和不必要的情况发生. 1.什么是FUS? Field Upgrade Software (FUS),翻译过来,叫“现场升级 ...

  9. 软件版本 Alpha、Beta、Rc

    软件版本的周期 α.β.γ 表示软件测试中的三个阶段 α :第一阶段,内部测试使用 β: 第二阶段,消除了大部分不完善的地方,仍可能存在漏洞,一般提供给特定的用户使用 γ: 第三阶段,产品成熟,个别地 ...

  10. 监控Tomcat状态！（重点）

    方法一:开发JAVA监控页面 [root@localhost ~]# mkdir /usr/local/tomcat8/webapps/memtest/[root@localhost ~]# cd / ...