html - 表格中单个行元素中的背景颜色条纹

Question

我有一个单行和 3 个单元格的表格。我正在寻找更改将有 3 条条纹的整行的颜色。我不知道该怎么做。

<table>
  <tr>
    <td>first cell</td>
    <td>second cell</td>
    <td>third cell</td>
  </tr>
</table>

如果它是一个 div，我会在其中放置 3 个 div，我将能够执行以下操作：

    <style>
    #someDiv{
        border: 1px;
       // background-color: grey;
        width:100%;
        height:102px;
    }
    #divthree{
        background-color:green;
        height:34px;
    }
    #divone{
        background-color:#FF6600;
        height:34px;
    }
    #divtwo{
        background-color:white;
        height:34px;
    }
</style>

<div id="someDiv">
    <div id="divone"></div>
    <div id="divtwo"></div>
    <div id="divthree"></div>
</div>

像这样http://jsfiddle.net/5mdEK/

这是它的工作原理：http: //jsfiddle.net/H4Hr7/

Answer 1

td:nth-child(even) {background: #CCC}
td:nth-child(odd) {background: #FFF}

或者

col:nth-child(2n) {background: #CCC}

见： http ://www.w3.org/Style/Examples/007/evenodd.en.html

Answer 2

这可以通过使用 CSS Gradients 轻松实现。

这样，您可以为单个元素创建条纹背景。

见：http ://css-tricks.com/striped-background-gradients/

如果您需要为每个设置不同的背景而不需要额外的类或任何东西，您可以使用高级选择器，例如

td:nth-child(2)

见：http ://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

下面是代码：

<style>
    #table{
        border: 1px;
       // background-color: grey;
        width:100%;
        height:102px;
    }
    #tdthree{
        background-color:green;
        height:34px;
    }
    #tdone{
        background-color:#FF6600;
        height:34px;
    }
    #tdtwo{
        background-color:white;
        height:34px;
    }
</style>

<table width="100%">
  <tr>
    <td id="tdone">first cell</td>
  </tr>
  <tr>
    <td id="tdtwo">first cell</td>
  <tr>
  </tr>
    <td id="tdthree">first cell</td>
  </tr>
</table>

Answer 4

<table>
  <tr>
      <td>first cell</td>
  </tr>
  <tr>
      <td>first cell</td>
  </tr>
  <tr>
     <td>first cell</td>
  </tr>  
</table>

css

table tr:nth-child(1) {
    background-color: red;
}
table tr:nth-child(2) {
    background-color: white;
}
table tr:nth-child(3) {
    background-color: green;
}

Answer 5

.Table
{
    display: table;
}
.Title
{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}
.Heading
{
    display: table-row;
    font-weight: bold;
    text-align: center;
}
.Row
{
    display: table-row;
}
.Cell
{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}

查看链接演示和完整源代码