Warum sind meine CSS Tabellen Stile gemischt

Question

Ich kann nicht verstehen, was ich hier falsch gemacht habe. Die CSS-Stile sollten aber für meine beiden Tabellen getrennt sein „rcorners1“ Tabelle erscheint durch die Einstellungen von „water_table“

Ich habe zwei Tabellen die CSS für erste Tabelle

table.water_table tr:nth-child(even) {background-color: #f2f2f2} 
table.water_table tr:hover {background-color: #f5f5f5} 
table.water_table th {background-color: #ffffff;} 
table.water_table th, td { 
    padding: 15px; 
    text-align: left; 
} 

Mein erster Tisch Aussehen betroffen zu sein wie

<table border="0" align="center" class="water_table" id="water_table"> 

Die CSS für meine zweite Tabelle

table.rcorners1 { 
    border-radius: 10px; 
    border: 1px solid #a4b3bd; 
    padding: 2px; 
    margin: 3px; 
    width: 120px; 
    height: 160px; 
    float: left; 
} 

meine zweite Tabelle sieht aus wie

<table width="100%" border="0" class="rcorners1" id="rcorners1"> 

Answer 1

Ich weiß nicht, ob dies die richtige Lösung ist. Was ich getan habe, um das Problem zu beheben, ist, "water_table" aus der css style Datei zu entfernen und einen style Block innerhalb des html zu erstellen, bevor meine "water_table" erscheint.

<style> 
table.water_table tr:nth-child(even) {background-color: #f2f2f2} 
table.water_table tr:hover {background-color: #f5f5f5} 
table.water_table th { 
    background-color: #ffffff; 
    /*color: white;*/ 
} 
table.water_table th, td { 
    padding: 15px; 
    text-align: left; 
} 
</style> 

Answer 2

Allgemeinen Sie wollen nicht, einen Inline-Stil Block in Ihrem HTML setzen - wenn Sie so tun sollten, ist es an der Spitze des Dokuments sein sollte, nicht im Körper.

Wenn jedoch das Verschieben der Stile das Problem für Sie gelöst hat, bedeutet dies, dass in Ihrer CSS-Datei noch etwas anderes vorhanden ist, das Ihre gewünschten Stile überschreibt.

Oftmals können Sie alle mit einem Element verknüpften Stile in einem Browser-Inspektor anzeigen. Wenn Sie Ihr Element überprüfen, wette ich, dass Sie einige zusätzliche Stile sehen, die von Ihrer CSS-Datei durchgestrichen sind.