Question

如何使用CSS制作带有不同td的条带background-color？

＆＃13;

.backgroundi:nth-of-type(2n) {
  background-color: #3366CC;
  height: 60px;
  width: 60px;
}
.backgroundi:nth-of-type(n+1) {
  background-color: #775577;
  height: 60px;
  width: 60px;
}

＆＃13;

<tr ng-repeat="comment in post.comments">
  <td>
    <div class="backgroundi"></div>
  </td>
  <td>
    <div class="c" style="margin-left:15px; margin-top:25px">hello</div>
  </td>
</tr>

＆＃13;

Plunker

Answer 1

首先，我不知道您的代码是否完整，但您需要添加<table> </table>代码并将代码放入代码中。现在这里是代码示例。

tr:nth-child(even) {background: #ffb3b3}
tr:nth-child(odd) {background: #E2E2E2}

<table>
<tr    ng-repeat="comment in post.comments" >
<td ><div class="backgroundi">background</div></td>
<td><div class="c" style="margin-left:15px; margtop:25px">hello</div></td>
</tr>
<tr>
<td><div class="c" style="margin-left:15px; margtop:25px">test</div></td>
<td><div class="c" style="margin-left:15px; margtop:25px">test STRIPE</div></td>
</tr>
</table>

现在，这里是我们指向表的奇数和偶数行并在它们上应用css。父类是表。试试这个并且一切顺利。快乐编码：）

Answer 2

你快到了。

您必须将:nth-of-type()应用于兄弟姐妹元素，在本例中为tr，定位td
你错过2让你变得奇怪而不是n+1应该是2n+1，你可以用odd代替2n even您可以使用/* Styles go here */ .backgroundi { height: 60px; width: 60px; } tr td { width: 100% } tr:nth-of-type(2n) td { background-color: #36C } tr:nth-of-type(2n+1) td { background-color: #757 } .c { margin-left: 15px; margin-top: 25px }

也避免使用内联样式，然后在CSS文件中使用

<table class="co">
  <tr ng-repeat="comment in post.comments">
    <td>
      <div class="backgroundi"></div>
    </td>
    <td>
      <div class="c">hello</div>
    </td>
  </tr>
  <tr ng-repeat="comment in post.comments">
    <td>
      <div class="backgroundi"></div>
    </td>
    <td>
      <div class="c">hello</div>
    </td>
  </tr>
  <tr ng-repeat="comment in post.comments">
    <td>
      <div class="backgroundi"></div>
    </td>
    <td>
      <div class="c">hello</div>
    </td>
  </tr>
  <tr ng-repeat="comment in post.comments">
    <td>
      <div class="backgroundi"></div>
    </td>
    <td>
      <div class="c">hello</div>
    </td>
  </tr>
  <tr ng-repeat="comment in post.comments">
    <td>
      <div class="backgroundi"></div>
    </td>
    <td>
      <div class="c">hello</div>
    </td>
  </tr>
</table>

CREATE TRIGGER trigger_one
...
PRECEDES trigger_two
...;

[and then a bit further down]

CREATE TRIGGER trigger_two
...
FOLLOWS trigger_one
...;

Answer 3

<style>
table tr td:nth-child(even) {background: #CCC}
table tr td:nth-child(odd) {background: #FFF}
</style>

<table width="200" border="1" cellspacing="10" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>  
</table>

Answer 4

您可以在<tr>中替换<td>和<tr>的背景：

tr:nth-child(odd) > td:first-child{
    background-color: #3366CC; height:60px;width:60px;
}
tr:nth-child(even) > td:last-child{
    background-color: #775577; height: 60px; width: 60px;
}

Answer 5

您的代码几乎没有变化。希望这能解决你的问题。

/* Styles go here */
tr td:nth-child(even){
   	 background-color: #3366CC; height:60px;width:60px;
   }
  tr td:nth-child(odd){
   	background-color: #775577; height: 60px; width: 60px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table clas="co ">
                <tr    ng-repeat="comment in post.comments" >
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                </tr>
                <tr    ng-repeat="comment in post.comments" >
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                </tr>
                <tr    ng-repeat="comment in post.comments" >
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                </tr>
                <tr    ng-repeat="comment in post.comments" >
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                </tr><tr    ng-repeat="comment in post.comments" >
                  <td ><div></div></td>
                  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
  <td ><div></div></td>
  <td><div class="c" style="margin-left:15px; margin-top:25px">hello</div></td>
                </tr>
                
              </table>

如何在css中制作strip td？

5 个答案: