38

Is there any workaround for the following "1 pixel to the left" bug?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

It looks like this:

Firefox CSS bug

Is there any pure CSS solution to this?


Edit

I was bit unclear about my table so here it is again:

With border-collapse:

Firefox CSS bug

With cellspacing="0" and without border-collapse as suggested:

Firefox CSS bug

So now the borders inside my table are doubled, but I want 1px border across my table.

When I remove 1px border from table I end with:

Firefox CSS bug

Borders are still doubled inside my table.

I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?

5
  • 10
    This particular problem irritates the hell out of me.
    – cletus
    Jun 23, 2009 at 23:02
  • I can't reproduce it, what version are you using?
    – cobbal
    Jun 23, 2009 at 23:06
  • I copy pasted your code and I don't see that 1px to the left thing. Firefox 3.0.11 on mac Jun 23, 2009 at 23:14
  • Which version of FF? I can't reproduce with 3.0.11 on Windows either. Jun 23, 2009 at 23:23
  • I'm using Firefox 3.0.11 on Mac, but forgot to mention that i use XHTML transitional doctype. With HTML3 doctype it renders without any errors.
    – Vexatus
    Jun 24, 2009 at 7:36

12 Answers 12

22

For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.

table { border-spacing: 0; *border-collapse: collapse; } 

This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).

If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.

1
  • 1
    This one should be the accepted answer instead, since we won't be using the old cellspacing attribute in HTML5. Apr 21, 2014 at 16:16
19

Remove the border-collapse and use cellspacing=0 instead.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.

Set your border widths to 10px in your code to see what is really happening.


edit after OP edit

You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
3
  • 2
    There is a CSS only alternative. Please see my answer
    – helpse
    Jul 16, 2014 at 17:21
  • @helpse got the best answer for sure
    – Dany
    Aug 6, 2020 at 12:44
  • Indeed, use the answer of @helpse, way easier, cleaner and better! :)
    – Gykonik
    Aug 28, 2021 at 9:08
8

This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

You see what it's doing? The trick is that we put only a top and left border on the cells:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

This leaves the table without a right and bottom edge: we style those onto table

+------+-------               |         +-------+------+ 
| cell | cell                 |         | cell  | cell |
+------+-------   +           |    =    +-------+------+
| cell | cell                 |         | cell  | cell |
|      |             ---------+         +-------+------+

The border-spacing: 0 is essential otherwise these lines will not connect.

1
  • I have this problem in: Chrome v78 for height and width, Firefox v70 for width. Safari rocks as always! This answer solved my problem. Thanks!
    – cyonder
    Dec 5, 2019 at 10:08
7

Best CSS only solution:

Add

td {
    background-clip: padding-box
}

More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Thanks to @medoingthings

4
  • Whatever the most current version is now.
    – HartleySan
    Aug 15, 2014 at 17:41
  • Can u post a fiddle showing it's not working? It works for me in all my tests.
    – helpse
    Aug 15, 2014 at 20:41
  • 2
    Best answer by far
    – Dany
    Aug 6, 2020 at 12:44
  • By far the best! Thank you!
    – JGoodgive
    Apr 14, 2021 at 8:30
2

table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */

1
  • I'd look for ya, but I forget what the context was or which file.
    – chovy
    Feb 20, 2010 at 9:11
2
table { border-spacing: 0; *border-collapse: collapse; }

wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}
2

I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:

table { border: 1px solid transparent; border-collapse: collapse; }

This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.

0
0

I don't think I've ever heard of a "1px to the left bug," you should upload your code someplace so we can check it and make sure it's not an "I missed something somewhere" bug :) I would also suggest running through your markup with Firebug to determine if there is anything else going awry.

1
0

I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.

0

Ran into this issue and as a work around. I used :

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

basically cheated the border by using a background color. Which thus prevented double inside borders.

0

My solution is as follows.

  1. Remove border-collapse, border and border-spacing from CSS.
  2. Add this JavaScript code:

    $('table tbody tr td').css('border-right', '1px solid #a25c17');
    $('table tbody tr td').css('border-bottom', '1px solid #a25c17');
    $('table tbody tr td:last-child').css('border-right', 'none');
    $('table').css('border-bottom', '1px solid #a25c17');
    

To be honest, I don't know why it works. It's jQuery magic.

2
  • This is an old post that already had an accepted, and explained, answer. Sep 22, 2012 at 3:50
  • 1
    Why use JavaScript? If this works, you should be able to set the same with just CSS.
    – Brad
    Mar 13, 2013 at 18:04
-4

I also have run into this problem the full proof solution is very simple in your asp:gridview just add

GridLines="None" 

and the lines disappear in Firefox no css modification needed.

1
  • 4
    The question has nothing to do with ASP.
    – Ben
    Jan 23, 2014 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.