CODEWITHSUNDEEP
javascriptcssreactjs
Mahmud Adam
Mahmud Adam

Reputation: 3579

Aligning text in th tag in JSX

I am trying to center the text in my th tag, and it is working fine in my example here: http://codepen.io/p-adams/pen/qNxZBV but if I view my code in the browser (Firefox), the text in my <th> tags is not centered. I am not sure if this has something to do with the browser. I have some basic styling:

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

And then in my ReactJS component where I render the 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>

Upvotes: 1

Views: 3153

Answers (2)

Alan
Alan

Reputation: 257

You could also add a !important after your text align. This will give it a higher priority. For example :

table th {
         color: #000 !important;
}

Upvotes: 1

Hugo Silva
Hugo Silva

Reputation: 6938

You need to find whatever CSS rule is overriding yours, then rewrite your rule to be more specific than the one you found. For example, you can change your selector to be: 

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

Have a look at how browsers decide which rules are the most relevant - https://developer.mozilla.org/en/docs/Web/CSS/Specificity

As a last resort, you could add !important to text-align declaration. But that will make it harder to override the rule later on - https://css-tricks.com/when-using-important-is-the-right-choice/

Upvotes: 1

Related Questions