zoukankan      html  css  js  c++  java
  • BootStrap 之 CSS全局样式中的表格

    不使用BootStrap 之 CSS全局样式中的表格,自己也不定义CSS样式

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>东方不败</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>五毒教主</td>
            <td></td>
        </tr>
    </table>

    效果如下:

    使用BootStrap 之 CSS全局样式中的表格 —— .table

    <table class="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>东方不败</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>五毒教主</td>
            <td></td>
        </tr>
    </table>

    效果如下:

    使用BootStrap 之 CSS全局样式中的表格 —— .table-striped

    <table class="table table-striped">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>东方不败</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>五毒教主</td>
            <td></td>
        </tr>
    </table>

    效果如下:

    使用BootStrap 之 CSS全局样式中的表格 —— .table-bordered

    <table class="table table-striped table-bordered">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>东方不败</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>五毒教主</td>
            <td></td>
        </tr>
    </table>

    效果如下:

    详情请查看:全局 CSS 样式

              

  • 相关阅读:
    Asible——inventory与大项目管理
    Asible——template
    Ansible——文件管理
    Ansible——处理任务失败
    Ansible——handlers与notify
    ubuntu 16.04 LTS 开发环境的安装及常用软件
    curl 命令详解
    VMware虚拟机三种网络模式详解
    ubantu 16.04 安装有道词典
    OneNote 使用汇总
  • 原文地址:https://www.cnblogs.com/liyihua/p/12405958.html
Copyright © 2011-2022 走看看