Wie spezifiziert a die Farbe einer bestimmten Tabellenzeile in einer externen CSS-Datei?

Question

Ich versuche, die Farbe jeder Zeile zu ändern. Ich habe bereits die externe CSS-Datei mit der HTML-Datei verknüpft.

HTML-Datei:

<tr><div class="row1"> 
    <td>15</td> 
    <td>15</td> 
    <td>30</td> 
</div></tr> 


<tr><div class="row2"> 
    <td>45</td> 
    <td>60</td> 
    <td>45</td> 
</div></tr> 


<tr><div class="row3"> 
    <td>60</td> 
    <td>90</td> 
    <td>90</td> 
</div></tr> 

In meinem CSS ich dies tun:

.row1{ 
     background-color: hotpink; 
    } 
    .row2{ 
     background-color: #ff0000; 
    } 
    .row3{ 
     background-color: blue; 
    } 

Answer 1

Geben Sie die Klasse, um die <tr> Tags statt:

.row1 { 
 
    background-color: hotpink; 
 
} 
 
.row2 { 
 
    background-color: #ff0000; 
 
} 
 
.row3 { 
 
    background-color: blue; 
 
}

<table> 
 
    <tr class="row1"> 
 
    <td>15</td> 
 
    <td>15</td> 
 
    <td>30</td> 
 
    </tr> 
 

 
    <tr class="row2"> 
 
    <td>45</td> 
 
    <td>60</td> 
 
    <td>45</td> 
 
    </tr> 
 

 
    <tr class="row3"> 
 
    <td>60</td> 
 
    <td>90</td> 
 
    <td>90</td> 
 
    </tr> 
 
<table>

Answer 2

Verwenden Sie die Klasse auf dem tr direkt

.row1 { 
 
    background-color: hotpink; 
 
} 
 
.row2 { 
 
    background-color: #ff0000; 
 
} 
 
.row3 { 
 
    background-color: blue; 
 
}

<table> 
 
    <tr class="row1"> 
 
    <td>15</td> 
 
    <td>15</td> 
 
    <td>30</td> 
 
    </tr> 
 

 
    <tr class="row2"> 
 
    <td>45</td> 
 
    <td>60</td> 
 
    <td>45</td> 
 
    </tr> 
 

 
    <tr class="row3"> 
 
    <td>60</td> 
 
    <td>90</td> 
 
    <td>90</td> 
 
    </tr> 
 
</table>

Answer 3

nicht DIVS innerhalb tr Element anwenden. Sie wie folgt aus:

<tr class="row1"> 
    <td>15</td> 
    <td>15</td> 
    <td>30</td> 
</tr> 

<tr class="row2"> 
    <td>45</td> 
    <td>60</td> 
    <td>45</td> 
</tr> 


<tr class="row3"> 
    <td>60</td> 
    <td>90</td> 
    <td>90</td> 
</tr> 

Answer 4

Sie können dies auch versuchen, mit Pseudo-Selektor

table tr:first-child{background-color: hotpink;} 
 
table tr:nth-child(2){background-color: #ff0000;} 
 
table tr:nth-child(3){background-color: blue;}

<table> 
 
<tr > 
 
    <td>15</td> 
 
    <td>15</td> 
 
    <td>30</td> 
 
</tr> 
 

 

 
<tr> 
 
    <td>45</td> 
 
    <td>60</td> 
 
    <td>45</td> 
 
</tr> 
 

 

 
<tr> 
 
    <td>60</td> 
 
    <td>90</td> 
 
    <td>90</td> 
 
</tr> 
 
    </table>