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 样式

              

  • 相关阅读:
    零基础用Docker部署微服务
    HashMap负载因子为什么是0.75
    一个JavaBean和DTO转换的优秀案例
    golang三方包应该如何安装--在线和离线
    Restful API 设计参考原则
    消息队列 RabbitMQ
    Python中的str与unicode处理方法
    MySQL索引背后的数据结构及算法原理
    Python面试题目--汇总
    How to check Logstash's pulse
  • 原文地址:https://www.cnblogs.com/liyihua/p/12405958.html
Copyright © 2011-2022 走看看