Menu
I have an HTML table which has a row with font size set as 10:
<tr style="font-size: 10 px">
In this row, I have several cells; all of these would inherit the font-size set at row level shown above.
But I would like to override the font size in the above row and I would like to do that only for a few cells (and not all).
I tried overriding the font size at cell level as shown below:
<td style="font-size: 12 px">
But unfortunately the above overriding does not seem to take effect and I still see all cells in the above row with font-size 10 only.
How can I achieve this overriding?
Please, help!
339
asked Sep 11 '25 01:09
The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles.
tr {
font-size: 10px;
}
td {
font-size: 20px !important;
}<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With