oreo oreo - 5 months ago 12
CSS Question

Text- align in css working for <td> but not for <th>

I'm trying to center align my text in the table. However, it works only for the td but not for th.

CSS for table, th, td:

table {
width: 100%;
text-align: center;

th,td {
border-bottom: 1px solid #ddd;
padding: 30px;
text-align: center;


<th><font size=6>Item name</font></th>
<th><font size=6>Brand</font></th>
<th><font size=6>Category</font></th>
<th><font size=6>Price</font></th>
<th><font size=6>Date of purchase</font></th>
<td><font size=4>{{ wish[4] }}</font></td>
<td><font size=4>{{ wish[6] }}</font></td>
<td><font size=4>{{ wish[5] }}</font></td>
<td><font size=4>{{ wish[7] }}</font></td>
<td><font size=4>{{ wish[3] }}</font></td>


I suspect your th is being overwritten somewhere else.

You can do this although I don't recommend it.

th,td {
  text-align: center !important;