使用 CSS 的備用表行顏色？

Question

我正在使用一個帶有交替行顏色的表格。

 tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; }

 <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table>

在這里，我將 class 用於tr ，但我只想將其用於table 。 當我將 class 用於表時，這適用於tr替代方案。

我可以使用 CSS 這樣寫我的 HTML 嗎？

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

如何使用 CSS 使行具有“斑馬條紋”？

Answer 1

 $(document).ready(function() { $("tr:odd").css({ "background-color":"#000", "color":"#fff"}); });

 tbody td{ padding: 30px; } tbody tr:nth-child(odd){ background-color: #4C8BF5; color: #fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>13</td> </tr> </tbody> </table>

有一個 CSS 選擇器，實際上是一個偽選擇器，稱為 nth-child。 在純 CSS 中，您可以執行以下操作：

tr:nth-child(even)
    background-color: #000000;
}

注意：在 IE 8 中不支持。

或者，如果您有 jQuery：

$(document).ready(function()
{
    $("tr:even").css("background-color", "#000000");
});

Answer 2

你有:nth-child()偽類：

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

在:nth-child()的早期，它的瀏覽器支持有點差。 這就是設置class="odd"成為一種常見技術的原因。 在 2013 年末，我很高興地說 IE6 和 IE7 終於死了（或者病到不再關心），但 IE8 仍然存在——謝天謝地，這是唯一的例外。

Answer 3

只需將以下內容添加到您的 html 代碼中（使用<head> ），您就完成了。

HTML：

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

比 jQuery 示例更簡單、更快。

Answer 4

我可以用 css 寫這樣的 html 嗎？

是的，您可以，但是您將不得不使用:nth-child()偽選擇器（盡管支持有限）：

table.alternate_color tr:nth-child(odd) td{
    /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

Answer 5

我們可以使用奇數和偶數 CSS 規則和 jQuery 方法來交替行顏色

使用 CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

使用 jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

 table tr:nth-child(odd) td{ background:#ccc; } table tr:nth-child(even) td{ background:#fff; }

 <table> <tr> <td>One</td> <td>one</td> </tr> <tr> <td>Two</td> <td>two</td> </tr> </table>

Answer 6

以上大部分代碼不適用於 IE 版本。 適用於 IE+ 其他瀏覽器的解決方案是這樣的。

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

Answer 7

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

Answer 8

您可以使用 nth-child(odd/even) 選擇器，但並非所有瀏覽器（即 6-8, ff v3.0 ）都支持這些規則，因此為什么大多數解決方案回退到某種形式的 javascript/jquery 解決方案以將類添加到這些不合規瀏覽器的行以獲得虎紋效果。

Answer 9

在 PHP 中有一種相當簡單的方法可以做到這一點，如果我理解你的查詢，我假設你用 PHP 編碼並且你正在使用 CSS 和 javascript 來增強輸出。

數據庫的動態輸出將攜帶一個 for 循環來迭代結果，然后將這些結果加載到表中。 只需添加一個函數調用，如下所示：

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

然后將該函數添加到頁面或庫文件中：

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

現在這將在每個新生成的表格行的顏色之間動態交替。

這比處理不適用於所有瀏覽器的 CSS 要容易得多。

希望這可以幫助。

Answer 10

請嘗試這種方式：它可以在Html文件中用於WebView

<head>
    
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
          
        th, td {
            text-align: left;
            padding: 8px;
        }
          
        tr:nth-child(even) {
            background-color: Lightgreen;
        }
    </style>
</head>

Answer 11

交替行選擇器

這是它的工作原理，以及如何使用模數在幾個不同的 colors（此處為 3）的行之間交替：

 ol>li:nth-child(3n+1) { background-color: blue; } ol>li:nth-child(3n+2) { background-color: green; } /* The following selector is equivalent to "nth-child(3n)" */ ol>li:nth-child(3n+3) { background-color: red; }

 <ol> <li /> <li /> <li /> <li /> <li /> <li /> <li /> <li /> <li /> </ol>

如前所述，選擇器中使用的行索引從 1（而不是 0）開始。 這就是為什么第 1、4、7 行的選擇器是nth-child(3n+1)的原因。

選擇器如何讀取

一行索引i的選擇器nth-child(Mn+k)讀取為if (i % M == k) 。 例如，如果我們想要 select 所有以 3 取模等於 2 的行，我們將寫入 CSS nth-child(3n+2) ，換句話說，選擇器會這樣做：

const M = 3;
const k = 2;

for (let i = 1; i < 10; i+=1){
    // The `nth-child(Mn+k)` selector: 
    if (i % M == k){
        console.log(`${i} selected`);
    }
}

產出

2 selected
5 selected
8 selected

使用 CSS 的備用表行顏色？

問題描述

11 個解決方案

解決方案1
791 已采納 2010-06-21 11:43:21

解決方案2
194 2010-06-21 11:41:40

解決方案3
43 2014-03-21 19:33:49

解決方案4
13 2010-06-21 11:45:24

解決方案5
13 2017-01-17 07:36:46

解決方案6
10 2014-04-23 08:06:31

解決方案7
9 2010-06-21 11:43:34

解決方案8
4 2010-06-21 11:41:55

解決方案9
3 2013-03-13 16:06:11

解決方案10
0 2021-04-22 09:27:16

解決方案11
0 2023-01-20 16:29:41

交替行選擇器

選擇器如何讀取

使用 CSS 的備用表行顏色？

問題描述

11 個解決方案

解決方案1 791 已采納 2010-06-21 11:43:21

解決方案2 194 2010-06-21 11:41:40

解決方案3 43 2014-03-21 19:33:49

解決方案4 13 2010-06-21 11:45:24

解決方案5 13 2017-01-17 07:36:46

解決方案6 10 2014-04-23 08:06:31

解決方案7 9 2010-06-21 11:43:34

解決方案8 4 2010-06-21 11:41:55

解決方案9 3 2013-03-13 16:06:11

解決方案10 0 2021-04-22 09:27:16

解決方案11 0 2023-01-20 16:29:41

交替行選擇器

選擇器如何讀取

解決方案1
791 已采納 2010-06-21 11:43:21

解決方案2
194 2010-06-21 11:41:40

解決方案3
43 2014-03-21 19:33:49

解決方案4
13 2010-06-21 11:45:24

解決方案5
13 2017-01-17 07:36:46

解決方案6
10 2014-04-23 08:06:31

解決方案7
9 2010-06-21 11:43:34

解決方案8
4 2010-06-21 11:41:55

解決方案9
3 2013-03-13 16:06:11

解決方案10
0 2021-04-22 09:27:16

解決方案11
0 2023-01-20 16:29:41