<!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. MySQL导出数据到文件报错

    执行如下语句: mysql> select * from users into outfile "F:\Develop\MySQL57\Uploads\users.txt" ...

  2. C语言：使用递归解决汉诺塔问题。

    //汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小 ...

  3. 「JSOI2012」玄武密码

    「JSOI2012」玄武密码 传送门 题目是要求多个串在母串上的最长匹配长度. 考虑 \(\text{AC}\) 自动机,我们建出 \(\text{Trie}\) 图然后用母串来在上面跑. 每一个能匹 ...

  4. JQ - 绑定（on）/解绑（off）事件（浅显的见解）

    on 绑定事件: $("selector").on("click",事件执行函数名); //为 selector 添加 点击事件 $("selecto ...

  5. 探索 Python + HyperLPR 进行车牌识别

    概要 HyperLRP是一个开源的.基于深度学习高性能中文车牌识别库,由北京智云视图科技有限公司开发,支持PHP.C/C++.Python语言,Windows/Mac/Linux/Android/IO ...

  6. spring security 方法权限使用

    前面我们讲过了使用<security:intercept-url>配置url的权限访问,下面我们讲解一下基于方法的权限使用默认情况下, Spring Security 并不启用方法级的安全 ...

  7. 4_2 刽子手游戏（UVa489）<自顶向下逐步求精法>

    Hangman Judge是一个猜英文单字的小游戏(在电子字典中常会看到),游戏规则如下:1.答案单字写在纸上(每个字元一张纸),并且被盖起来,玩家每次猜一个英文字元(letter).2.如果这个英文 ...

  8. Wireshark 查看指定进程的网络包

    Wireshark 查看指定进程的网络包 打开任务管理器,右键筛选列,选中PID(进程标识符): 找到该进程对应的PID,如1200: 在cmd中执行netstat -ano|findstr 1200 ...

  9. 关于OSPF LSA不稳定！

    Issue 1 Solution It is important that you understand the error message during attempts to troublesho ...

  10. ISE主备注册和同步

    Synchronize Primary and Secondary Cisco ISE Nodes You can make configuration changes to Cisco ISE on ...