wiktus239 wiktus239 - 1 month ago 7
HTML Question

CSS padding for single TD inside a table

I have a table, constructed like this:

<table>
<tr> <td>1</td> <td>2</td> <td rowspan="4">3</td></tr>
<tr> <td>4</td> <td>5</td> </tr>
<tr> <td>6</td> <td>7</td> </tr>
<tr> <td>8</td> <td>9</td> </tr>
<tr height="100"><td colspan="2">10</td><td class="eleven">11</td> </tr>
</table>


Now the problem is within the last row. Whole row has a height set to 100px, so there is a plenty of room in TDs. In the very last TD I want to set an individual padding, so only the content "11" is padded from the top:

.eleven {
padding-top:15px;
}


Setting this causes the problem - the first TD in this row also gets padding-top:10px; Why and how to make only the 2nd one padded?

Answer

Ok, I found out what caused the problem. It was an entry in a little html5-css-reset snippet I use:

vertical-align:baseline;

assigned generally to most of common elements. Having that in mind, now everything works as supposed to.

Comments