user1547174 user1547174 - 6 months ago 15
HTML Question

Cannot override text-align left css

I have a table where the

th
elements are
text-align: left
. In my css, I specified
text-align: center
to my
th
elements, but it's not overriding for some reason. Does anyone have any idea why? My table:

<table class="days_table" align="center">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="last_cell"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="last_cell"></td>
</tr>
</tbody>
</table>


My css:

td, th {
border-right: 1px solid gray;
border-right-style: dotted;
text-align: center;
}


Here's my fiddle for reference:

https://jsfiddle.net/qg8xzf2y/2/

Answer

Be more specific and it will override tables.less file. In this case:

td, table th {
    border-right: 1px solid gray;
    border-right-style: dotted;
    text-align: center;
}

table th specificity will win against simple th