<!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>

        <table class="table table-condensed">

            <caption>精简表格布局</caption>

            <thead>

                <tr>

                    <th>名称</th>

                    <th>城市</th>

                    <th>邮编</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Tanmay</td>

                    <td>Bangalore</td>

                    <td>560001</td>

                </tr>

                <tr>

                    <td>Sachin</td>

                    <td>Mumbai</td>

                    <td>400003</td>

                </tr>

                <tr>

                    <td>Uma</td>

                    <td>Pune</td>

                    <td>411027</td>

                </tr>

            </tbody>

        </table>

    </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 表格：在 <tbody> 内的任一行启用鼠标悬停状态

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

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

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

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

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

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为任意 <table> 添加基本样式 (只有横向分隔线)

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

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：悬停表格

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

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：边框表格

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

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：条纹表格

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

随机推荐

  1. PHP加JS实现分片上传，断点续传

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

  2. ubuntu16.04/ubuntu18.04安装网易云音乐

    一.下载1.0版本 下载地址:http://s1.music.126.net/download/pc/netease-cloud-music_1.0.0_amd64_ubuntu16.04.deb 下 ...

  3. Hbuilder实用快捷键

    Ctrl + d                   删除整行内容 Ctrl + Shift +R            复制当前行到下一行 Ctrl + Shift +D               ...

  4. Sqlmap 工具用法详解

    Sqlmap 工具用法详解                                 sqlmap是一款自动化的sql注入工具.     1.主要功能:扫描.发现.利用给定的url的sql注入漏 ...

  5. leetcode网解题心得——61. 旋转链表

    目录 leetcode网解题心得--61. 旋转链表 1.题目描述 2.算法分析: 3.用自然语言描述该算法 4.java语言实现 5.C语言实现 leetcode网解题心得--61. 旋转链表 1. ...

  6. OPENTSDB: Request failed: Internal Server Error net.opentsdb.core.IllegalDataException

    今天Opentsdb补传历史数据的时候,出现了如下的错误: Request failed: Internal Server Error net.opentsdb.core.IllegalDataExc ...

  7. 「国家集训队」middle

    「国家集训队」middle 传送门 按照中位数题的套路,二分答案 \(mid\),序列中 \(\ge mid\) 记为 \(1\),\(< mid\) 的记为 \(-1\) 然后只要存在一个区间 ...

  8. 重新理解CEO的学习能力----HHR计划----以太入门课--第一课

    一共5个小节. 第一节:开始学习 1,投资人最看重的一点:CEO的学习能力. (因为CEO需要:找优秀的合伙人,需要市场调研,机会判断,组建团队,验证方向,去融资,冷启动,做增长,解决法务,财务,税务 ...

  9. PTA的Python练习题（五）

    昨天耽搁了一天,今天继续 从  第3章-5 字符转换 开始 1. a=input() b="" for i in a: ': b=b+iprint(int(b))#(写成b=i+b ...

  10. Java基础知识笔记第一章：入门

    java的地位: java具有面向对象,与平台无关,安全,稳定和多线程等优良特性,是目前软件设计中优秀的编程语言. java的特点: 1.简单 2.面向对象 3.平台无关 jre(java runti ...