6/11/24, 6:41 PM html - Padding inside table cell despite td{padding:0} - Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

Padding inside table cell despite td{padding:0}

Asked 8 years, 10 months ago Modified 8 years, 3 months ago Viewed 669 times

I'm having this quite annoying bug for a while now.. The problem is quite simple, there is this
huge padding appearing on the top and bottom of a table cell when i place an object (in this
0 case, image) in it.

What I am trying to do is place different objects in a Grid set up as table in HTML so that's why
you will see all those extra cells. initial width and height of table and cells is known, I just specify
col/row span of the cell in which the object will be placed based on object's width/height.

I have searched and applied many solutions like cellspacing,cellpadding = 0, padding: 0, img's
display block but nothing seems to be working here.

td{border:1px solid black; padding:0}

<table style="width:600pt; height:800pt; table-layout: fixed;" cellspacing="0"

cellpadding="0">
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td
rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;"
src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td >
</td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>

https://stackoverflow.com/questions/31667371/padding-inside-table-cell-despite-tdpadding0?rq=3 1/5
6/11/24, 6:41 PM html - Padding inside table cell despite td{padding:0} - Stack Overflow
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td rowspan="18" colspan="30" ></td></tr>
</table >

Run code snippet Expand snippet

Img is placed in 8th row and 8th column of the grid but it slides quite a lot way down in the cell
because of the padding. Inspecting the cell in browser will clear out the problem.

Fiddle can be found here for your convenience

html css

Share Improve this question Follow asked Jul 28, 2015 at 4:27
Abdul Jabbar
2,573 5 24 44

https://stackoverflow.com/questions/31667371/padding-inside-table-cell-despite-tdpadding0?rq=3 2/5
6/11/24, 6:41 PM html - Padding inside table cell despite td{padding:0} - Stack Overflow

3 Answers Sorted by: Highest score (default)

The padding is only there because your force the table to have a height of 800 pixels. If you
remove the height property, the padding disappears.
2
td{border:1px solid black; padding:0;}

<table style="width:600pt; table-layout: fixed;" cellspacing="0" cellpadding="0">

<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td
rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;"
src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td >
</td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>

https://stackoverflow.com/questions/31667371/padding-inside-table-cell-despite-tdpadding0?rq=3 3/5
6/11/24, 6:41 PM html - Padding inside table cell despite td{padding:0} - Stack Overflow
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td rowspan="18" colspan="30" ></td></tr>
</table >

Run code snippet Expand snippet

Share Improve this answer Follow answered Jul 28, 2015 at 4:33
Robby Cornelissen
95.1k 23 146 167

If you want the table to be that height, your other option is to set the height property directly on
the td. This will adjust all of the other tds accordingly to add to your set table height. But the
1 issue is that tds for a tr are always the same height. So if you set the height on multiple tds within
the same tr, the height for all of the tds will be set to the largest td height.

That may have sounded confusing but basically, you can't tailor each table data uniquely to a
picture if your pictures aren't the same size. You may get "that" table data to have the "padding"
removed but once you add more pictures, you're going to have padding on at least one of your
photos if they aren't the same size.

This solution might work for you but I would consider using a design framework. A grid system
might be easier for this sort of thing.

Share Improve this answer Follow edited Jul 28, 2015 at 18:34 answered Jul 28, 2015 at 4:56
CleoR
816 1 6 19

https://stackoverflow.com/questions/31667371/padding-inside-table-cell-despite-tdpadding0?rq=3 4/5
6/11/24, 6:41 PM html - Padding inside table cell despite td{padding:0} - Stack Overflow

If I am understanding you correctly, you want the image at the top? If thats the case use vertical
align.
0
<td rowspan="15" colspan="15" style="vertical-align:top">
<img style="width:298pt; height:292pt;"
src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td>

Demo Fiddle

Share Improve this answer Follow edited Mar 3, 2016 at 13:22 answered Jul 28, 2015 at 4:33
Sevle noveyak
3,119 2 20 31 3,260 1 19 19

https://stackoverflow.com/questions/31667371/padding-inside-table-cell-despite-tdpadding0?rq=3 5/5