CSS for No Border Thickness

Question

I have a table that I built out with 0px border, and I am trying to get images in each row to fit seamlessly to one another but even though the border does not show there is still a 1px gap in between the rows. Is there a way to fix this?

table { 
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 10px;
}   

table th, table td { 
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}  

tr { 
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    border-spacing: 0px; 
}

did you try `border: none` on the `tr` element? – Allen Liu Sep 13 '11 at 18:33 — Allen Liu, Sep 13 '11 at 18:33

score 2 · Answer 1 · answered Sep 13 '11 at 18:37

Might be that the content inside the table is creating some extra space, and you didn't mention what browser, but be aware that IE7 doesn't understand border-collapse so you should add:

<table cellspacing="0">

to the table for IE7. Also, there is no reason to apply border-collapse to the tr.

score 1 · Answer 2 · answered Sep 13 '11 at 18:34

1

I think border-spacing is for a table. Did you try border: none for the tr element?

answered Sep 13 '11 at 18:34

Allen Liu

3,948
8
35
47

score 0 · Answer 3 · answered Sep 13 '11 at 18:37

0

Try this:

CSS

img {
   border:none;
   padding:0;
   margin:0;
}

HTML

<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
..table rows..
</table>

answered Sep 13 '11 at 18:37

Andres I Perez

75,075
21
157
138

score 0 · Answer 4 · answered Sep 13 '11 at 18:39

0

did you try display: block for images?

answered Sep 13 '11 at 18:39

simoncereska

3,035
17
24

score 0 · Answer 5 · answered Sep 14 '11 at 14:20

Thanks for the responses, I had the cellspacing="0" in the HTML, and tried all your suggestions. None seemed to change the outcome, my only thought now is that I'm working on a Mac and that it is some kind of browser issue. I'll have to test it on a PC and see how it looks.

CSS for No Border Thickness

5 Answers5