技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS的odd和even屬性實現table表格tr單雙行顏色相間而不同

作者:admin    時間:2017-8-25 15:57:24    瀏覽:

Table表格顏色,默認時是整個表格每行每列的顏色都一樣,這很容易產生視覺疲勞,因此,較友好的設計是TR單雙行顏色相間而不同。效果如下圖所示:

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

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

如果先定義兩個class,然后每行 tr 均設置其class,這是可以達到要求的,但是代碼就比較多,如下代碼所示:

<style type="text/css">
  .tr1{background-color:#F5F5F5}
  .tr2{background-color:#FFFFFF}
</style>

<table>
  <tr class="tr1"><td>...</td></tr>
  <tr class="tr2"><td>...</td></tr>
  <tr class="tr1"><td>...</td></tr>
  <tr class="tr2"><td>...</td></tr>
</table>

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

<style type="text/css">
table tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table tr:nth-child(even) {
  background-color:#fff;
}
</style>

<table>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
</table>

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

實例

完整HTML代碼

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現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>規定邊框的顏色。</td>
  </tr>

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

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

  <tr>
    <td>inherit</td>
    <td>規定應該從父元素繼承 outline 屬性的設置。</td>
  </tr>
</table>
</body>
</html>

運行結果

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

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

execcodegetcode

標簽: css  table  
  • IT熱文
  • 站長推薦
陕西11选5中奖助手 买双色球彩票有技巧和窍门 优国际娱乐手机登录 广州期货配资网 证券投资学股票分析报告 股票软件排名 时时彩软件开号 福建十一选五开奖结果 吉林快三一定牛 上海十一选五推荐 江西多乐彩11选5开奖结果