Table Cell Height Trebles when I try and style it!

I have spent a good number of hours trying to solve this one:

Table Extract:

<td colspan=“2”><p class=“stats”>Total of Houses...</p></td>


.householder .stats {text-align:right;}

Web page:

The specific cell is about 20 cells from the top above the number 6 in the left hand column.

Why does the row expand in height with this styling ? And how to I prevent this ? I have tried to use a span instead of a <p> but then text stays to the left then.

Ideally I should like to colspan the first three cells, but col1 is styled { text align center } and I don’t think that’s over-ridable,

Any thoughts


It’s just the default margins that the browser applies to a <p> element. You can remove it in many ways, such as:

td p {margin: 0;}

Gosh, that was quick;

.householder .stats {text-align:right; margin: 0;}

works perfectly


Cool. Make sure to try out your browser’s inspector. Right click on an element (like the p) and choose Inspect Element (or similar) and it will show you the code under the hood. If you hover over the code for the p, you see the margins highlighted. It’s a good way to understand what’s going on.