zoukankan      html  css  js  c++  java
  • css3 之表格隔行分色显示

    <html>
        <head>
        <title></title>
        <style type="text/css">
           table{
            width: 100%;
            font-size: 14px;    
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto; /*让table居中显示*/
            border: 1px solid #cad9ea;
            color: #666666;
           } 
           th{
            height: 30px;
            background-color: #cad9ea;    
           }
           td{
            height: 20px;    
           }
           td,th{
            border: 1px solid #cad9ea;    
            padding: 0 1em 0;
           }
           tr:nth-child(even){
            /*通过结构伪类选择器为表格内的偶数行定义背景色,以实现隔行分色显示效果*/
            background-color: #f5fafe;    
           }
    
        </style>
        </head>
    
        <body>
        <table>
            <tr>
            <th>排名</th>
            <th>校名</th>
            <th>学校类型</th>
            </tr>
            <tr>
            <td>1</td>
            <td>清华大学</td>
            <td>理工</td>
            </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>
        </body>
    </html>

    效果图:

  • 相关阅读:
    软链接
    yum
    vm
    tengine
    创智LIUNX
    作业11
    作业10
    作业9
    作业8
    作业7
  • 原文地址:https://www.cnblogs.com/yshyee/p/3370011.html
Copyright © 2011-2022 走看看