zoukankan      html  css  js  c++  java
  • 表格

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

    ...

  • 相关阅读:
    本地计算机 上的 Redis Server 服务启动后停止
    RabbitMQ 命令行
    mysql ORDER BY 中文出现错误问题
    使用javascript纯前端导出excel
    软件测试概念学习
    excel控件只为简单写入数据表--github找到ExcelUtil笔记
    快速创建Spring web项目
    PQGrid商业化的表格组件
    mybatis传入参数为0被误认为是空字符串的解决方法
    MyBatis like报错
  • 原文地址:https://www.cnblogs.com/qq21270/p/3994537.html
Copyright © 2011-2022 走看看