的CSS

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：第n个孩子（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;
}

请参阅Link Demo and Full Source

背景颜色条纹在表中的单行元素

5 个答案:

的CSS