oreo oreo - 4 months ago 8
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%;
border-collapse:separate;
text-align: center;
}

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


html:

<table>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>

Answer

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;
}