Text-Align in CSS arbeiten für , aber nicht für <th>

Question

Ich versuche, meinen Text in der Tabelle auszurichten. Es funktioniert jedoch nur für die td, aber nicht für th.

HTML & CSS für die Tabelle, th, td:

table { 
 
    width: 100%; 
 
    border-collapse: separate; 
 
    text-align: center; 
 
} 
 
th, 
 
td { 
 
    border-bottom: 1px solid #ddd; 
 
    padding: 30px; 
 
    text-align: center; 
 
}

<table> 
 
    <tr> 
 
    <th><font size=6>Item name</font> 
 
    </th> 
 
    <th><font size=6>Brand</font> 
 
    </th> 
 
    <th><font size=6>Category</font> 
 
    </th> 
 
    <th><font size=6>Price</font> 
 
    </th> 
 
    <th><font size=6>Date of purchase</font> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td><font size=4>{{ wish[4] }}</font> 
 
    </td> 
 
    <td><font size=4>{{ wish[6] }}</font> 
 
    </td> 
 
    <td><font size=4>{{ wish[5] }}</font> 
 
    </td> 
 
    <td><font size=4>{{ wish[7] }}</font> 
 
    </td> 
 
    <td><font size=4>{{ wish[3] }}</font> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

ich vermuten, dass Ihr th woanders überschrieben wird.

Sie können dies tun, obwohl ich es nicht empfehle.

th,td { 
    text-align: center !important; 
} 

Answer 2

Es scheint zu funktionieren. Irgendein anderer CSS-Code muss anderswo damit in Konflikt stehen.

Sie können !important nach Ihren Attributwerten verwenden. Es sollte gut funktionieren.