Mahmud Adam Mahmud Adam - 4 months ago 19
CSS Question

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>

Answer

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/