Border width showing differently for different cells in Firefox

Question

I am dynamically generating table with around 55 rows and 15 columns. I have set boder width of columns to 1px like this

#tblId td
{
    border:1px solid #616161;
    background-color:#EEEEEE;
}

But for some cells it show border thicker than 1px! Here are the part of my table, you can see the difference in borders for upper columns and below columns

enter image description here

Edit

Here is the fiddle http://jsfiddle.net/bz3Da/2/

That is really strange that it is looking good in the fiddle but not at my end, I checked no other classes are affecting the table.

can you please create fiddle..? are you appending to existing table.? — Dipesh Parmar, Mar 25 '13 at 10:38
this could be something related to browser-side issues rendering small lines ... did you try changing it to 2 or 3px border and see if this persists? — henser, Mar 25 '13 at 10:43
Did you try using a css reset (http://stackoverflow.com/questions/3485720/which-html5-reset-css-do-you-use-and-why) because the browser's own styles might be affecting it — timhc22, Mar 25 '13 at 10:41
are you testing on a particularly old version of firefox? old gecko engines are [notorious for their sub-pixel rendering](http://ejohn.org/blog/sub-pixel-problems-in-css/). — Eliran Malka, Mar 25 '13 at 12:13
Nope, my firefox is up to date, also as I mentioned in the edit part of my question the table is showing correctly when I check it in jsfiddle, but not in my screen — Pawan Nogariya, Mar 25 '13 at 12:20
This appears to still be an issue in 2017. I'm running Firefox 50.1.0, and I've defined `bottom-border: 1px solid #000` on the ``s - the borders are 1px on some rows, but 2px on others -- *and* this changes as I scroll up and down on the page! — jbyrd, Jan 05 '17 at 18:49

score 1 · Answer 1 · answered Jan 06 '17 at 12:32

I reset the firefox zoom. It works!!! perfect. i found when i zoom in some border will be bold. blow is my cssenter code here firefox 50.1 / windows 7

table td, table th {  border: 1px solid #e8e8e8;}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

http://jsfiddle.net/bz3Da/4/

Add !important:

    #tblId td
    {
        border:1px solid #616161 !important;
        background-color:#EEEEEE;
    }

Inline styles are more important than CSS styles. You can override them, but you should avoid using !important - just remove inline styles and use CSS only.

Someone has already asked why here: Should I avoid using !important in CSS?

edited May 23 '17 at 12:08

Community

1
1

answered Mar 25 '13 at 15:44

biphobe

4,525
3
35
46

!important worked but I do want to have few lines broader than the rest of the lines, !important make all the child changes undone so I cannot get any line broader than 1px – Pawan Nogariya Mar 26 '13 at 06:14
@PawanNogariya - you have defined border's styles inline, you must change these values to get the desired thickness. – biphobe Mar 26 '13 at 09:09
Then how I will be able to give only few cells 2px border while all other cells border 1px? – Pawan Nogariya Mar 26 '13 at 10:20
Remove all inline styles that you have added to this grid, use css to style the cells by default and assign 1px border to them, define a class that changes that border to 2px and add that class to the desired cells. – biphobe Mar 26 '13 at 10:58
@PawanNogariya - then modify your jsfiddle project to show us what exactly doesn't work. – biphobe Apr 05 '13 at 10:01
That's the problem, it is working fine in jsFiddle :( I have copied the same table structure in fiddle that are showing incorrectly in my webpage – Pawan Nogariya Apr 05 '13 at 10:56
@PawanNogariya - if it works fine on jsfiddle and doesn't work on your website, then I won't be able to help you without a live example. – biphobe Apr 05 '13 at 11:07
I am having the same problem with firefox 1px borders. Depending on the selected zoom level some lines are shown thicker than others. On changing the zoom level sometimes different lines are shown thicker, at other levels all are even. The same code in IE always produces even sized lines at any zoom level. So I conclude it seems to be a bug in Firefox. Only I wonder why this bug is still there, the effect has annoyed me for quite long now. – Sadko Nov 13 '13 at 07:13

Border width showing differently for different cells in Firefox

2 Answers2