Wie man Streifen td in css macht?

-1

Wie macht man Streifen td mit verschiedenen background-color mit CSS?Wie man Streifen td in css macht?

.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; 
 
}

<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>

Plunker

Quelle

2016-06-29 Vladyslav Sharapat

Es gibt eine Menge Informationen darüber, wie Sie dies bereits tun - https://www.google.co.uk/#q=css+zebra+table –

Sie haben einen Tippfehler in Ihrem PLNKR '

' sollte '

' Tauschen Sie auch die css '.backgroundi' in' .co' - Beispiel '.co tr: nth-child (even) {background -Farbe: # 775577; Höhe: 60px; width: 60px;} 'http://pnnr.co/edit/cjMElvMiI2ejMkvhDHAx?p=preview – NewToJS

Antwort

Sie waren fast da.

müssen Sie die :nth-of-type() zu Geschwister-Elemente gelten, in diesem Fall die tr, Targeting die td
Sie eine 2 fehlen auf Ihre ungerade so statt n+1 sollte 2n+1 machen, die Sie mit dem Wort ersetzen kann odd gleiche für 2n geht, kann man mit dem Wort ersetzen even

Auch

Vermeiden Inline-Styles, verwenden Sie dann in CSS-Dateien

/* 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 
 
}

<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>

Quelle

2016-06-29 10:07:37 dippas

<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>

Quelle

2016-06-29 10:10:48 Nehemiah

was ist mit einer Erklärung, wie der Code funktioniert? und wie wäre es mit dem OP tatsächlichen Code? – dippas

Sie die Hintergründe von <tr> abwechseln und von <td> in <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; 
}

Quelle

2016-06-29 10:12:51

ist das eine Antwort oder eine Frage an das OP? – dippas

Es ist eine Antwort auf die Frage. Ich war mir nicht ganz im Klaren darüber, was das OP gefragt hatte, und bat deshalb um eine Bestätigung des OP. Ich hätte es in einem Kommentar getan, aber unter einer Frage kann ich noch keinen Kommentar schreiben. –

Nur wenige Änderungen in deinem Code. hoffe das löst dein problem.

/* Styles go here */ 
 
tr td:nth-child(even){ 
 
    \t background-color: #3366CC; height:60px;width:60px; 
 
    } 
 
    tr td:nth-child(odd){ 
 
    \t 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>

Quelle

2016-06-29 10:15:05

Was ist mit Informationen darüber, warum es funktioniert? – dippas

Erstens, ich weiß nicht, Ihren Code vollständig ist oder nicht, aber Sie müssen <table> </table> Tag hinzuzufügen und innerhalb des Tags Code Code zu setzen. Jetzt ist hier das Codebeispiel für Sie.

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>

Nun, was ist hier los ist, dass wir ungerade zeigen und geraden Zeilen für die Tabelle und auf sie CSS-Anwendung. Elternklasse ist Tabelle. Probieren Sie das und alles Gute. Happy Coding :)

Quelle

2016-06-29 10:21:28

Die vollständige Quelle ist in der PLNKR Link gegeben, der Quellcode ist mit '

' Tags abgeschlossen. – NewToJS

nützlich für mich danke – sumit

@sumit fast jede Antwort hier ist vorher mit dem gleichen Code/info mit ein paar von ihnen bessere info – dippas

Antwort

Verwandte Themen