<!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. c# Linq List<T>去除其中重复的项

    //要去重的 list<T> listTest: var resultlist= listTest.GroupBy(p =>p.Id).Select(g => g.First( ...

  2. Ansible自动化搭建及工具集和常见模块、命令详情(重点)

    一.ansible介绍 1.ansible简介 官方的title是“Ansible is Simple IT Automation”——简单的自动化IT工具. Ansible跟其他IT自动化技术的区别 ...

  3. python重要的日志模块logging

    一,logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 1.可以通过设置 ...

  4. leetCode练题——38. Count and Say

    1.题目 38. Count and Say The count-and-say sequence is the sequence of integers with the first five te ...

  5. Python：时间日历基本处理

    time 模块 提供了处理时间和表示之间转换的功能 获取当前时间戳 时间戳:从0时区的1970年1月1日0时0分0秒,到所给定日期时间的时间,浮点秒数,或者毫秒整数 获取方式: import time ...

  6. 用for循环写这段代码

    之前用while循环写了一段代码,现在改为用for循环来写,代码如下: hongtao_age = 38 for i in range(5): guess_age = int(input(" ...

  7. vs2008每次build都会重新编译链接 &&　项目已经过期

    转自:http://blog.csdn.net/movezzzz/article/details/6816605 无外乎两种情况: 1.时间问题,所创建的文件的时间比如是:2011-09-22 09: ...

  8. 【Fine学习笔记】Xcode的快捷方式

    Xcode快捷键 文件 CMD + N: 新文件:  CMD + SHIFT + N: 新项目: CMD + O: 打开: CMD + S: 保存:  CMD + SHIFT + S: 另存为: CM ...

  9. springboot2.0集成RestTemplate

    实际集成 获取restTemplate实例,封装方法 package com.quant.api.utils.restTemplate; import org.springframework.http ...

  10. Centos7 [ubuntu] 安装pycharm2019.1.3并永久破解教程

    一.安装pycharm2019专业版并激活步骤 1.拉取安装包 # wget   https://download.jetbrains.com/python/pycharm-professional- ...