Note that there are some explanatory texts on larger screens.

plurals
  1. POProblems getting an 1px border on a table using CSS
    text
    copied!<p>I have tried a lot of combinations but I can't seem to get just a simple 1px border on all the cells and surrounding of a table. Here's what I have:</p> <pre><code>table.admin { border-collapse:collapse; } table.admin, table.admin td, table.admin th { border: 1px solid #BBB; padding: 5px; } table.admin td { text-align:left; } table.admin th {background-color: #BBB; font-weight: 400; } &lt;table class="admin"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Row&lt;/th&gt;&lt;th&gt;Row&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>It looks really simple BUT what I get is a table where every row has a bottom border of 2px. </p> <p>I tried this in a <a href="http://jsfiddle.net/dJyCq/" rel="nofollow">fiddle</a> It looks fine there but not on my page. I am totally confused as there is still this 2px border on the bottom of every row. I just can't see why. </p> <p>Does anyone have any suggestions? All I want is to see the cells with a nice 1px border that looks the same around every cell. Please note that it looks good in fiddle so why not in my Firefox browser :-( </p> <p>Here's another example. I just added to my page. I used a different class name so I could be sure there was nothing inherited from another place:</p> <pre><code>&lt;style&gt; table.admin2 { border-collapse:collapse; } table.admin2, table.admin2 td, table.admin2 th { border: 1px solid #BBB; padding: 5px; } table.admin2 td { text-align:left; } table.admin2 th {background-color: #BBB; font-weight: 400; } &lt;/style&gt; &lt;table class="admin2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Row&lt;/th&gt;&lt;th&gt;Row&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;abc&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Note: After comments by Spudley I checked other browsers and this only happens with Firefox. I am using Firefox 4. Not sure how to solve but at least I see it only with one browser.</p>
 

Querying!

 
Guidance

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