why the margin padding doesn't work in table td and tr?

Question

<table  border="0" style="padding:10px;width: 960px;border-collapse: collapse;">

   <tbody>
<tr>
<td  style="padding: 0"><img src="8.jpg" alt="" /></td>
<td  style="padding: 0"><img src="98.jpg" alt="" /></td>
<td  style="padding: 0"><img src="998.jpg" alt="" /></td>
<td  style="padding: 0"><img src="1998.jpg" alt="" /></td>
</tr>
<tr>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
<td  style="background-color: #757575;">11194</td>
</tr>
<tr>
<td  style="padding: 0"><img src="8.jpg" alt="" /></td>
<td  style="padding: 0"><img src="98.jpg" alt="" /></td>
<td  style="padding: 0"><img src="998.jpg" alt="" /></td>
<td  style="padding: 0"><img src="1998.jpg" alt="" /></td>
</tr>

</tbody>
</table>

why i can't add margin padding to the tr and td? i want the td (<td style="background-color: #757575;">11194</td>) have margin-right.namely, each separated by some space. but can't work. how to correct it. and the second tr have some space between the following tr.

See my answer and provide the extra css if you have used rather than inline style on table. So i can see if some thing is missing in the question. — w3uiguru, Dec 30 '12 at 07:01

score 8 · Answer 1 · edited May 23 '17 at 10:28

8

margin specifications are ignored for table cells Refer: http://www.w3.org/TR/CSS2/tables.html and CSS Cell Margin

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

If you wanna add padding, just set border-collapse:separate refer: http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

edited May 23 '17 at 10:28

Community

1
1

answered Dec 30 '12 at 07:29

macio.Jun

9,647
1
45
41

1

but if in a table, i want to there is no white space between the first tr and the second tr. but the second tr with the third tr have. thank you. i add border-spacing:0 to the tr,but not work – user1932607 Dec 30 '12 at 09:01
add height:100% to img element. – macio.Jun Dec 30 '12 at 18:08
Have you tried yet? If it's not what you want, plz let me know. – macio.Jun Jan 01 '13 at 01:25

score 2 · Answer 2 · answered Dec 30 '12 at 06:51

2

I guess you are asking for border-collapse; so try using it...

table {
   border-collapse: collapse;
}

If you want to add padding you can do it like

table.class_name td {
   padding: 0; 
}

answered Dec 30 '12 at 06:51

Mr. Alien

153,751
34
298
278

could you have a try?althouth i set td (11194). those are all connect with each. both are not have space. – user1932607 Dec 30 '12 at 07:01
@user1932607 sorry but am not getting you – Mr. Alien Dec 30 '12 at 07:03
1119411194 i want to make there are some white space between them – user1932607 Dec 30 '12 at 07:06
@user1932607 check this out do you want something like this? http://jsfiddle.net/vryqU/ – Mr. Alien Dec 30 '12 at 07:11
yes,if not using a white border, using margin or padding, can get that – user1932607 Dec 30 '12 at 07:17
@user1932607 that I used just for showing you that was that the thing you wanted, so here you go this is the correct way http://jsfiddle.net/vryqU/1/ – Mr. Alien Dec 30 '12 at 07:20
one more question,i want to there is no white space between the first tr and the second tr. but the second tr with the third tr have. thank you. i add border-spacing:0 to the tr,but not work – user1932607 Dec 30 '12 at 07:55

w3uiguru · Answer 3 · 2012-12-30T07:09:26.713

2

The reason because you are giving padding on table element and on td and you are giving padding:0

Remove border-collapse: collapse from table element and you can handle padding and margin easily in this table.

See the demo fiddle for concepts: http://jsfiddle.net/GVt3z/

Note: Above fiddle is not containing exact answer.

See updated fiddle for margin-right space but with different technique.

http://jsfiddle.net/GVt3z/1/

edited Dec 30 '12 at 07:09

answered Dec 30 '12 at 06:51

w3uiguru

5,864
2
21
25

could you have a try?althouth i set td (11194). those are all connect with each. both are not have space. – user1932607 Dec 30 '12 at 07:02
You can not give margin on td elements you can give padding to them, because they are all the childs of tr and tr is child element of table element. – w3uiguru Dec 30 '12 at 07:07
you can give margin on table elements and give padding to td elements. – w3uiguru Dec 30 '12 at 07:07
see my updated answer and see this fiddle after my answer http://jsfiddle.net/GVt3z/2/ . – w3uiguru Dec 30 '12 at 07:14

score 0 · Answer 4 · answered Jul 09 '22 at 06:10

0

add "display:inline-block" to all elemans of table.

td{
  display:inline-block;
}

answered Jul 09 '22 at 06:10

m.khodapanah

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 09 '22 at 21:18

why the margin padding doesn't work in table td and tr?

4 Answers4

Related