2个table样式

迷南。 2022-03-19 16:50 229阅读 0赞

table.css

@charset "utf-8";
    table{
    	font-size:12px;
        table-layout:fixed;
        border-collapse: collapse;
        margin:0 auto;
    }
    
    td{
        height:25px;
    }
    
    
    
    /*第一套css*/
    table.table1{
        border:1px solid #9db3c5;
        color:#633123;
    	
    }
    table.table1 th {
        background-color:#B4CDCD;
        height:30px;
        color:#453a32;
    	border:1px solid #a7d1fd;
        padding:0 2px 0;
    }
    table.table1 td{
        border:1px dotted #cad9ea;
    	padding: 3px 0 0 0;
    	text-align:center;
    	height:25px;
    }
    
    table.table1 tr.interval{
        background-color:#e8f3fd;
    }
    
    /*第2套css*/
    table.table2{
        border:1px solid #9db3c5;
        color:#CD0000;
    }
    table.table2 th {
        background-color:#EEE685;
        height:30px;
        color:#68228B;
    	border:1px solid #a7d1fd;
        padding:0 2px 0;
    }
    table.table2 td{
        border:1px dotted #cad9ea;
    	padding: 3px 0 0 0;
    	text-align:center;
    	height:25px;
    }
    
    table.table2 tr.interval{
        background-color:#e8f3fd;
    }

应用页面：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>两套表格样式</title>
    <link rel="stylesheet" type="text/css" href="table.css" />
    <style type="text/css">
    body{
        font-size:12px;
    }
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    
    <body>
    
    <table width="98%" class="table1">
      <tr>
        <th>课程</th>
        <th>资料查询</th>
        <th>作者</th>
      </tr>
    
      <tr class="interval">
        <td>css</td>
        <td>http://www.w3school.com.cn/css/index.asp</td>
        <td>索隆</td>
      </tr>
      <tr>
        <td>css</td>
        <td>http://www.w3school.com.cn/css/index.asp</td>
        <td>索隆</td>
      </tr>
      <tr class="interval">
        <td>css</td>
        <td>http://www.w3school.com.cn/css/index.asp</td>
        <td>索隆</td>
      </tr>
      <tr>
        <td>css</td>
        <td>http://www.w3school.com.cn/css/index.asp</td>
        <td>索隆</td>
      </tr>
      <tr class="interval">
        <td>css</td>
        <td>http://www.w3school.com.cn/css/index.asp</td>
        <td>索隆</td>
      </tr>
    </table>
    
    </body>
    </html>

效果：

![1365060305_2734.jpg][]

![1365060317_1202.jpg][]

[1365060305_2734.jpg]: https://img-my.csdn.net/uploads/201304/04/1365060305_2734.jpg
[1365060317_1202.jpg]: https://img-my.csdn.net/uploads/201304/04/1365060317_1202.jpg