CODEWITHSUNDEEP
htmlcssfirefoxhtml-table
Valentina Chumak
Valentina Chumak

Reputation: 299

Table header is unexpextedly shifted in firefox on monitors with big resolution

how I see it, scaled by image editor

I have encountered a problem with table headers in firefox, which appeard to me when viewing on monitors with big resolution (i.e. 1920x1080); the table header is shifted by 1 pixel.

I am trying to achieve the following: Internal borders - 1 pixel, external - 2px, header should have a different color.

I've removed some redundant code, but was left with 2 div blocks due necessity. The problem disappeared in other browsers, in other resolutions, when I resize browser window. But it reproduces on anther computer (Mac).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            table.border {
                border-collapse: collapse;
            }
            table.border td {
                background-color: #ffffff;
                border: 1px #CCCCCC solid;
            }
            table.border td:first-child {
                border-left-width: 2px;
            }
            table.border td:last-child {
                border-right-width: 2px;
            }
            table.border th {
                background-color: #767676;
                border: #CCCCCC solid;
                border-width: 0px 1px;
                color: #ffffff
            }
            table.border th:first-child {
                border-left: #767676 solid 2px;
            }
            table.border th:last-child {
                border-right: #767676 solid 2px;
            }
            table.border {
                border: #CCCCCC solid;
                border-width: 0px 0px 2px 0px;
            }
            #all {
                max-width: 1400px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
        <title></title>
    </head>

    <body>
        <div id="all">
            <table class="border">
                <tr>
                    <th>#</th>
                    <th>Name</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>test</td>
                </tr>
            </table>
        </div>
    </body>

</html>

Upvotes: 1

Views: 564

Answers (2)

Stocki
Stocki

Reputation: 473

@Eliran Malka has right, but maybe you can do some workaround, too.

In this example the table.border has no border, but you can add a 'bordered' div after it. If you modify the #all element to hide the unnecessary .footer_border parts you get something like this:

http://jsfiddle.net/Stocki/mBQS2/2/

Edit:

For modern browsers it is possible to use the ::after selector instead of div, so the HTML code stays clean:

http://jsfiddle.net/Stocki/mBQS2/4/

Upvotes: 1

Eliran Malka
Eliran Malka

Reputation: 16263

You got bitten by the infamous border-collapse bug (which affects webkit browsers as well, but differs in behavior; the background shifts to the other side). This bug has to do with different implementations in browsers when rounding ½ pixels.

Ben Buchanan wrote about this on Opera's Web Standards Curriculum, which was later donated to the W3C web education community group.

Here's an extract from the article, for the sake of completeness:

… So what’s the solution? If you want to use a 1px border and a caption background, there really isn’t a fix other than to "live with it ". It is a very minor difference and a non-fatal problem—that is, the table remains entirely usable. So, many people choose to just live with the differences between browsers. Let the Web be the Web. If you are happy to use a larger border, say 2px, then you can simply set a 1px border on table, cells and caption; then set table to separate borders and apply zero spacing between them:

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

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

In Firefox at least, the 1px borders will add up to the desired 2px rendered border, avoiding the rounding problem on the way. Safari still leaves a gap. Alternatively, you can hide the problem by not using a border or background colour on your caption. The problem is still there; you just won’t see it. This is probably the simplest and most effective solution.

TL;DR - gimme tha codez!

You have, then, several choices to tackle this pickle:

  • Lose the border, and you have no issue. (Demo)
  • Live with it, if you must have a background on the header and a 1 pixel border.
  • Use a wider border (say, 2 pixels) by applying 1 pixel border to cells, headings and captions, set border spacing to 0 and collapse borders by separate. (Demo)
  • Don't use background/border colors on the headings (or captions), effectively hiding the problem away. (Demo)

Upvotes: 2

Related Questions