zoukankan      html  css  js  c++  java
  • 使用伪类选择器实现表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表格</title>
        <style>
         table caption{
             font-size: 28px;
             font-weight: bold;
             margin:20px 0;
         }
         table{
             width: 100%;
             text-align: center; 
             border-collapse: collapse;
         }
          td,th{
            border: 1px solid #e6e6e6;
            height: 50px;
         }
         table thead{
             background: #49638c;font-weight: bold;color: white
         }
         table th:nth-child(1),td:nth-child(1){
             width: 10%;
         }
         table th:nth-child(2),td:nth-child(2){
             width: 20%;
         }
         table th:nth-child(3),td:nth-child(3){
             width: 30%;
         }
         table th:nth-child(4),td:nth-child(4){
             width: 20%;
         }
         table th:nth-child(5),td:nth-child(5){
             width: 20%;
         }
         table tbody tr:nth-child(2n-1){
             background: #ececec;
         }
         table tbody tr:nth-child(2n){
             color: #7e939e;
         }
         table tbody tr:nth-child(2n-1){
             color: #775a5a;
         }
         table tbody tr:hover{
            background: #c7c2f5;
         }
         table tfoot{
             background: #49638c;
             font-weight: bold;
             color: white;
             text-align: right;
         }
    
    
        </style>
    </head>
    <body>
      <table>
          <caption>某某某数据</caption>
          <thead>
              <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
          </thead>
          <tbody>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                    <td>数据5</td>
            </tr>
            <tfoot>
            <tr>
              /*clspan为合并行*/
    <td colspan="4">表尾统计1</td> <td>数据2</td> <!-- <td>数据3</td> <td>数据4</td> <td>数据5</td> --> </tr> <tr> <td colspan="4">表尾统计1</td> <td>数据2</td> <!-- <td>数据3</td> <td>数据4</td> <td>数据5</td> --> </tr> </tfoot> </tbody> </table> </body> </html>

  • 相关阅读:
    无线路由器wds桥接技术+丢包率
    2016CCPC东北地区大学生程序设计竞赛1008/HDU 5929 模拟
    Codeforces Round #375 (Div. 2) A B C 水 模拟 贪心
    Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) A B C D 水 模拟 并查集 优先队列
    Codeforces Round #310 (Div. 2) A B C
    Codeforces Round #374 (Div. 2) A B C D 水 模拟 dp+dfs 优先队列
    Codeforces Round #313 (Div. 2) A B C 思路 枚举 数学
    Codeforces Round #373 (Div. 2) A B C 水 贪心 模拟(四舍五入进位)
    CentOS7 PostgreSQL 安装
    数据库事务的隔离级别
  • 原文地址:https://www.cnblogs.com/lyl-0667/p/10965815.html
Copyright © 2011-2022 走看看