html - Table header is unexpextedly shifted in firefox on monitors with big resolution -
i have encountered problem table headers in firefox, appeard me when viewing on monitors big resolution (i.e. 1920x1080); table header shifted 1 pixel.
i trying achieve following: internal borders - 1 pixel, external - 2px, header should have different color.
i've removed redundant code, left 2 div blocks due necessity. problem disappeared in other browsers, in other resolutions, when resize browser window. 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>
@eliran malka has right, maybe can workaround, too.
in example table.border has no border, can add 'bordered' div after it. if modify #all element hide unnecessary .footer_border parts this:
http://jsfiddle.net/stocki/mbqs2/2/
edit:
for modern browsers possible use ::after selector instead of div, html code stays clean:
Comments
Post a Comment