• 表格


    <style type="text/css">
    /*蓝表格*/
    .table1{border:1px solid #4472c4;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;}
    .table1 tr{border:1px solid #4472c4;}
    .table1 th{padding:5px;font-size:14px;background:#4472c4;color:#FFF;text-align:center;}
    .table1 td{padding:5px 10px;font-size:14px;}
    
    /*灰表格*/
    .table2{border:1px solid #c4c4c4;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;}
    .table2 tr{border:1px solid #c4c4c4;}
    .table2 th{padding:5px;font-size:14px;background:#c4c4c4;color:#333;text-align:center;}
    .table2 td{padding:5px 10px;font-size:14px;}
    
    /*无边框表格*/
    .table0{border:0;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;}
    .table0 th{padding:5px;font-size:14px;text-align:center;}
    .table0 td{padding:5px 10px;font-size:14px;}
    </style>
    
    <table class="table1">
    <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    </table>
    <table class="table2">
    <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    </table>
    <table class="table0">
    <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    </table>

    一个有边框的蓝表格:

    <style type="text/css">
    /*蓝表格*/
    .table1{border-collapse:collapse;width:50%;margin-top:10px;text-align:center;}
    .table1 th{border:1px solid #4472c4;padding:5px;font-size:14px;background:#4472c4;color:#FFF;}
    .table1 td{border:1px solid #4472c4;}
    </style>
    <table class="table1">
    <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr>
    </table>

    ...

  • 相关阅读:
    学习方法类
    CSS中height:100%和height:inherit的异同
    DOM怎么添加、移除、移动、复制、创建和查找节点
    CommonJS,AMD,CMD和ES6的对比
    vue-admin
    XSS 和 CSRF简述及预防措施
    js的执行机制
    重绘和回流
    什么是BFC?
    v-model实现原理
  • 原文地址:https://www.cnblogs.com/qq21270/p/3994537.html
Copyright © 2020-2023  润新知