Cannot override text-align left css

Question

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 1

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