Ausrichten von Text in th-Tag in JSX

Question

Ich versuche, den Text in meinem th-Tag zu zentrieren, und es funktioniert gut in meinem Beispiel hier: http://codepen.io/p-adams/pen/qNxZBV aber wenn ich meinen Code im Browser (Firefox), den Text in meinem <th> Tags sind nicht zentriert. Ich bin mir nicht sicher, ob das etwas mit dem Browser zu tun hat. Ich habe einige grundlegende Styling:

th { 
    border: 1px solid purple; 
    width: 125px; 
    text-align: center; 
    padding: 10px; 
} 

Und dann in meiner ReactJS Komponente, wo ich das machen table:

<table> 
    <thead> 
     <tr> 
      <th>Course #</th> 
      <th>Course name</th> 
      <th>Credit hours</th> 
      <th>Time</th> 
      <th>Days</th> 
      <th>Seats available</th> 
     </tr> 
    </thead> 
    <tbody> 
     {details} 
    </tbody> 
</table> 

Answer 1

Sie müssen herausfinden, was CSS-Regel Ihr überschreibt, dann umschreiben Ihre Regel mehr zu sein spezifischer als der, den Sie gefunden haben. Zum Beispiel können Sie Ihre Wähler ändern:

bei

html body table th { 
    border: 1px solid purple; 
    width: 125px; 
    text-align: center; 
    padding: 10px; 
} 

Werfen Sie einen Blick, wie Browser entscheiden, welche Regeln die wichtigsten sind - https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Als letzten Ausweg, können Sie !important-text-align Erklärung hinzuzufügen. Aber das macht es später schwieriger, die Regel zu überschreiben - https://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

Sie könnten auch eine! Wichtig nach Ihrem Text ausrichten. Dies gibt ihm eine höhere Priorität. Zum Beispiel:

table th { 
     color: #000 !important; 
}