<!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. win10中，vscode安装go插件排雷指南

    最近学习go,想着使用强大的vscode编写go,在安装go插件过程中,遇到了很多问题.下面记录解决方案. 1)win10环境,安装go,vscode,git 配置GOPATH环境变量,在我的电脑-& ...

  2. Centos610安装MVN

    1.下载mav安装 下载免安装版上传linux cd /opt/maven mkdir repository cd apche-maven-3.3.9/conf vi settings.xml  设置 ...

  3. DVWA实验之Brute Force（暴力破解）- Medium

    DVWA实验之Brute Force(暴力破解)- Medium   有关DVWA环境搭建的教程请参考: https://www.cnblogs.com/0yst3r-2046/p/10928380. ...

  4. Bugku-CTF社工篇之社工进阶

     

  5. Docker for YApi--一键部署YApi

    获取YApi镜像$ docker pull mrjin/yapi:latest 注意:本仓库目前只支持安装,暂不支持升级,请知晓.如需升级请备份mongoDB内的数据. docker-compose ...

  6. 如何判断WLC的FUS版本

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

  7. MQTT.js browser node 均支持

    npm - mqtt 官网手册 https://www.npmjs.com/package/mqtt#weapp 简书用户 使用笔记 https://www.jianshu.com/p/4fd95ca ...

  8. Jmeter 如何发起一个post请求

    举例平台:https://www.juhe.cn/docs/api/id/65 前提条件: 1)要在聚合网站注册实名认证才可以收到Key,用于Get请求的参数数值 2)Jmeter本地安装好 3.这是 ...

  9. 中国电信与小米成立5G联合创新实验室

    导读 中国电信与小米成立5G联合创新实验室 近日,在中国电信战略与创新研究院,小米与中国电信共同发起的5G联合创新实验室正式揭牌成立.双方将充分发挥技术.网络.产品和生态的优势,围绕“5G+AIoT” ...

  10. 在Linux CentOS 下安装JDK 1.8

    一首先去官网下载linux 版本JDK1.8  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...