IE Table Border Bug?

I encountered this the other day. Firefox, Safari and Opera do what I expected and believe to be correct. I’m curious if anyone can explain this, or knows of a workaround that “doesn’t suck”. Take the following testcase:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
 <head>
    <title>IE Table Border Bug</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        table {
            background-color: green;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        table td {
            width: 100px;
            border-bottom: 3px solid red;
        }
            table td.strip {
            background-color: #fff;
            border-bottom: 3px solid #fff;
        }
    </style>
</meta></head>
<body>
<table>
       <tr>
           <td> Test</td>
           <td class="strip"> Test</td>
           <td> Test</td>
       </tr>
 
</table>
</body>
</html>

Example

Pay attention to the bottom border. Should be flush with the green cells.

Firefox 2.0

Firefox Render

Close Up:
Firefox Render (Close Up)

IE 6

IE Render

Close Up:
IE Render (Close Up)

IE 7

IE7 Render

Close Up:
IE7 Render (Close Up)

Strange, but interesting. Excuse the poor quality of the screenshots. I cut these up really quick. Perhaps this weekend I’ll do a nicer job.

10 thoughts on “IE Table Border Bug?

  1. Here is a work around (kind of sucks.)
    http://garyvdm.googlepages.com.....derBug.htm

    It seems like when border-collapse is collapse, the background is rendered under the right and bottom border, and the default border is 1px transparent.

    My workaround is to set the offending borders to the color of the next sibling cell.

  2. You can also work around the problem by turning off border-collapse (but I couldn’t persuade IE6 to turn off its cell padding except by using HTML).

  3. i agree, the css that Dao put works just dandy for me too.
    I just did a find and replace for

  4. I want to get rid of “border-collapse: collapse;” but can not get it done. I am using IE6.

    table.coll
    {

    border-spacing:0px;
    border-width: 0px;
    cellpadding: 0px;
    cellspacing: 0px;
    }
    table.sep
    {
    border-collapse: collapse;
    }

    Peter
    Griffin

    Lois
    Griffin

    Peter
    Griffin

    Lois
    Griffin

  5. Slightly related…

    I had a table generated using JavaScript with the tds having a thin solid border on the top only, thus giving the appearance of rows split by thin lines with properly separated data fields w/ out any rendered separation (only whitespace). When the table loads js checks to see how many rows there are, and displays only the first 5 of them, thus the other rows are still there but the css display is set to none. There is then paging buttons in place which onclick iterate through the next 5 items in the table displaying them and hiding others. What was strange was that when the paging occurred in IE7 there were residual top-borders from the tds as the rows grew and shrunk in height to accommodate the different amounts of data. When I scrolled the page however these phantom borders would vanish, but then when I scrolled back up they would re-appear. Only when I set the border-collapse to seperate, and set the cellspacing=”0″ on the table did the table behave properly ( as suggested by Philippe).

    I am not sure why this occurred, but perhaps someone else out there has encountered this.

Leave a Reply

Your email address will not be published. Required fields are marked *