Databases
StackOverflow2013
Postsdbo
POTable header is unexpextedly shifted in firefox on monitors with big resolution
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTable header is unexpextedly shifted in firefox on monitors with big resolution
    text
    copied!<p><img src="https://i.stack.imgur.com/MtDPW.png" alt="how I see it, scaled by image editor"></p> <p>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.</p> <p>I am trying to achieve the following: Internal borders - 1 pixel, external - 2px, header should have a different color.</p> <p>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).</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="all"&gt; &lt;table class="border"&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;test&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload