HTML Help

seeeker · Joined: 06 Aug 2009 Posts: 6

I have a table that has two content columns, separated by a 10px gutter, and with a 6px gutter all around. This is not completely relevant, but the 1st content cell is 290px and the 2nd is 508px.

For the wider content cell (508px), when I add an ID="......" to the <TD> tag, or define a class, and add padding with an external style sheet, the padding widens the cell.

Through extensive experimentation, varying the padding varies the number of pixels the cell is widened. I have also tried a width attribute for the TD cell in the style sheet. The padding always shifts things. I have troubleshooted every css item, the other cells, etc, enough and have determined that it is the padding that is shifting things.

All I want is a fixed-width column table: 6/290/10/508/6, (with a combo of ID's in the tags and width="" in the cells, but the padding set in a style sheet is making the cell wider. What am I missing? I thought padding reduced content space within a cell, and "margin" extended outwards.

What's going on here?!

sticks464 · Joined: 31 Dec 2006 Posts: 2311

As with any container when adding padding you must reduce the width by the amount of padding added to maintain appearance.
Padding does reduce the available space if the width is also reduced because it is applied inside the container whereas margins are applied outside the container.

To apply 10px of padding to a table cell
Code: <tr>
<td class="somename">Some content</td>
<td class="anothername">More content</td>
</tr>

Code: .somename {
width:270px;
padding:0 10px;
}
.anothername {
width:488px;
padding:0 10px;
}

If you are wanting to get your gutters by applying padding
Code: .somename {
width:274px;
padding:0 10px 0 6px;
}
.anothername {
width:502px;
padding-right:6px;
}

However if you are not removing the browser defaults for padding and margins you are not getting a true number of pixels. You will have to use something like Eric Myers css reset

seeeker · Joined: 06 Aug 2009 Posts: 6

I assumed so confidently that the padding would not be subtracted from the desired width that I didn't even try that. I thought you fix the width, then whatever the padding is, encroaches inwards, leaving whatever is leftover for content.

Anyway, problem solved.
Thanks!