CSS Tabellen mit Links mit merkwürdigem Farbverhalten

Ich habe eine Frage. Ich versuche, eine CSS-Tabelle mit alternierenden farbigen Zeilen zu erstellen, z. B. this. Ich möchte jedoch, dass ein Teil des Inhalts der Tabelle Links enthält, und ich stelle fest, dass der Hintergrund des Textes dieser Zellen sich merkwürdig verhält (nämlich dass die Hintergrundfarbe der falschen Zeile für die Hälfte der Zeilen verwendet wird). Ich bin ziemlich neu in CSS, also ist es möglich, dass ich einen offensichtlichen Fehler mache. Screenshot:CSS Tabellen mit Links mit merkwürdigem Farbverhalten

Funky link bg coloration

Und MWE Code:

<html> 

    <style type="text/css"> 

    table.t2 { 
    } 
    .t2 th, .t2 td { 
    padding: 4px 8px; 
    background: #fbd7b4; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) { 
    background: #f3eddd; 
    } 
</style> 

    <table class="t2" summary="blah"> 
    <caption>hey </caption> 

    <thead> 
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr> 
</thead> 
<tfoot> 
<tr><th colspan="4">double </th></tr> 
</tfoot>- 
<tbody> 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 

</tbody> 
</table> 

</body> 
</html>

Alle diese Hilfe Festsetzung würde sehr geschätzt werden!

Quelle

2016-03-28 J. Jane

Sie die bg Farbe des TD verändert aber nicht die Anker 'a' - Sie benötigen einen anderen Satz von Arten ähnlich wie diese hinzu:' .T2 tbody tr: nth-child (ungerade) *: nth-child (even) a' – ochi

Ich glaube, das ist das, was Sie wollen ...

ausschließen einfach das ein Element von Färbung.

<html> 
 

 
    <style type="text/css"> 
 

 
    table.t2 { 
 
    } 
 
    .t2 th, .t2 td { 
 
    padding: 4px 8px; 
 
    background: #fbd7b4; 
 
    } 
 

 
    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd):not(a) { 
 
    background: #f3eddd; 
 
    } 
 
</style> 
 

 
    <table class="t2" summary="blah"> 
 
    <caption>hey </caption> 
 

 
    <thead> 
 
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr> 
 
</thead> 
 
<tfoot> 
 
<tr><th colspan="4">double </th></tr> 
 
</tfoot>- 
 
<tbody> 
 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
 

 
</tbody> 
 
</table> 
 

 
</body> 
 
</html>

Quelle

2016-03-28 20:11:27 Wowsk

Ich denke, das OP möchte, dass jede andere Zelle Farben wechselt (wie ein Schachmuster) – ochi

Aktualisierte Antwort. – Wowsk

Richtig! Ein guter Anfang, obwohl! –

Sie haben die Hintergrundfarbe des <a> Element angeben. Etwas wie folgt aus:

.t2 th, .t2 td, .t2 td a, .t2 td a { 
    padding: 4px 8px; 
    background: #fbd7b4; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) { 
    background: #f3eddd; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even) a, .t2 tbody tr:nth-child(even) *:nth-child(odd) a{ 
    background: #f3eddd; 
    }

Quelle

2016-03-28 20:15:26 87387264223462

CSS Tabellen mit Links mit merkwürdigem Farbverhalten

Antwort

Verwandte Themen