日韩成视频在线精品,无遮挡国产黄片粉色视频

技術(shù)頻道 - html技術(shù)

CSS的odd和even屬性實(shí)現(xiàn)table表格tr單雙行顏色相間而不同

作者:admin 時(shí)間:2017-8-25 15:57:24 瀏覽:

Table表格顏色，默認(rèn)時(shí)是整個(gè)表格每行每列的顏色都一樣，這很容易產(chǎn)生視覺疲勞，因此，較友好的設(shè)計(jì)是TR單雙行顏色相間而不同。效果如下圖所示：

table表格tr單雙行顏色相間而不同

如果先定義兩個(gè)class，然后每行 tr 均設(shè)置其class，這是可以達(dá)到要求的，但是代碼就比較多，如下代碼所示：

其實(shí)，css都某些定義為我們節(jié)省了大量的代碼，要達(dá)到table表格tr單雙行顏色相間而不同的要求也一樣，css提供了針對性的寫法，代碼如下：

代碼里 odd 和 even 是定義單雙行的樣式，其中 odd 是單行，而 even 是雙行。

實(shí)例

完整HTML代碼

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實(shí)現(xiàn)table表格tr單雙行顏色相間而不同</title>

<style type="text/css">

table.dataintable {
margin-top:15px;
border-collapse:collapse;
border:1px solid #aaa;
width:100%;
}

table.dataintable th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#3F3F3F;
border:1px solid #3F3F3F;
text-align:left;
color:#fff;
}

table.dataintable td {
vertical-align:text-top;
padding:6px 15px 6px 6px;
border:1px solid #aaa;
}

table.dataintable tr:nth-child(odd) {
background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
background-color:#fff;
}

</style>

</head>
<body>
<table class="dataintable">
<tr>
    <th>值</th>
    <th>描述</th>
</tr>

<tr>
    <td><i>outline-color</i></td>
    <td>規(guī)定邊框的顏色。</td>
</tr>

<tr>
    <td><i>outline-style</i></td>
    <td>規(guī)定邊框的樣式。</td>
</tr>

<tr>
    <td><i>outline-width</i></td>
    <td>規(guī)定邊框的寬度。</td>
</tr>

<tr>
    <td>inherit</td>
    <td>規(guī)定應(yīng)該從父元素繼承 outline 屬性的設(shè)置。</td>
</tr>
</table>
</body>
</html>