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

            <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. try catch和if else

    当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息.描述这种情况的技术术语是:JavaScript 将抛出一个错误. try 语句允许我们定义在执行时进行错误测试的 ...

  2. ASP.NET Core搭建多层网站架构【8.2-使用AutoMapper映射实体对象】

    2020/01/29, ASP.NET Core 3.1, VS2019, AutoMapper.Extensions.Microsoft.DependencyInjection 7.0.0 摘要:基 ...

  3. 简单oracle查询语句转换为mongo查询语句

    可以将简单的单表查询语句转换成Mongo过滤条件 列: 1. db.demo.aggregate([ {"$match": {"$and": [{"p ...

  4. ThinkPHP3.2.2的函数扩展

    ThinkPHP的函数扩展:为了更好的在前台模板中显示变量,例如,商品分类中,分类名称之间的缩进.此时,在APP/Common/Common文件夹下(APP为新建的应用目录),新建一个php文件,如: ...

  5. 验证码 倒计时 vue 操作对象

    //html <input type="number" v-model="phoneNumber" placeholder="请输入手机号&qu ...

  6. Atcoder Grand Contest 039C（容斥原理，计数DP）

    //每次操作相当于将最低位取反加到最高位(N~1位)#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace s ...

  7. re.compile匹配

    import re string = '<h4 class="title">愤怒的葡萄</h4>' pattern = '<h4 class=&quo ...

  8. problem ：无法显示activemq的管理界面

    点击 Manage ActiveMQ broker 无法显示admin界面 解决方法:修改activemq.xml 和 jetty.xml文件 把所有0.0.0.0修改为127.0.0.1 成功: 账 ...

  9. idea通过Ctrl+鼠标滚轮放大/缩小字体

  10. login() got an unexpected keyword argument 'extra_context'

    环境:xadmin   django2.0  python3.7.4 操作登录login()或者注销logout()报以上错误的解决办法如下: 在xadmin的views/website.py中 修改 ...