<!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. 【HTML】输入密码访问

    <script> (function(){ if('{{ page.password }}'){ if (prompt('请输入文章密码') !== '{{ page.password } ...

  2. C/C++中size_t潜在的问题

    在C++中,利用数组下标访问数组元素时,常常将下标类型定义为size_t类型,因为正常来说,数组的下标就是size_t类型.例如这样: for (size_t i = 0; i < contai ...

  3. 传奇gee引擎,智能假人,假人脚本,geeM2假人

    开新区注意事项: 1.新区无任何玩家数据下可以运行“MirServer\假人行会初始化”目录下的“点我初始化假人行会.Bat”程序 2.默认假人后台管理密码为:2139263   ;--------- ...

  4. Shiro入门学习与实战（一）

    一.概述 1.Shiro是什么? Apache Shiro是java 的一个安全框架,主要提供:认证.授权.加密.会话管理.与Web集成.缓存等功能,其不依赖于Spring即可使用: Spring S ...

  5. 计算机二级-C语言-程序修改题-190113记录-对指定字符串的大小写变换处理。

    //给定程序中fun函数的功能是:将p所指的字符串中每个单词的最后一个字母改成大写.(这里的“单词”是指由空格隔开的字符串) //重难点:指针对数组的遍历.大小写转换的方法.第一种使用加减32 得到, ...

  6. ASA-ACL类型

    安全设备支持下面5种不同类型的ACl: 标准ACL 扩展ACL(可匹配v4&v6流量) EtherType ACL (以太网类型ACL) WebType ACL(Web类型ACL) 1.标准A ...

  7. Codeforces Round #620 (Div. 2) A. Two Rabbits

    Being tired of participating in too many Codeforces rounds, Gildong decided to take some rest in a p ...

  8. leetcode 0206

    目录 ✅ 292. Nim 游戏 ✅ 933. 最近的请求次数 ✅ 942. 增减字符串匹配 仍旧有需要思考的地方 py尝试 ✅ 977. 有序数组的平方 ✅ 292. Nim 游戏 https:// ...

  9. 02使用GitHub远程仓库

    一.远程库配置 由于本地的GIT仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要以下配置: 1.创建SSH key 为什么GitHub需要SSHKey:根据key来授权,有哪些key可以往 ...

  10. Python 爬取 热词并进行分类数据分析-[热词分类+目录生成]

    日期:2020.02.04 博客期:143 星期二   [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[ ...