7

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.

Improve this question
8
  • 1
    can you please create fiddle..? are you appending to existing table.? Commented Mar 25, 2013 at 10:38
  • 1
    Did you try using a css reset (stackoverflow.com/questions/3485720/…) because the browser's own styles might be affecting it Commented Mar 25, 2013 at 10:41
  • 1
    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? Commented Mar 25, 2013 at 10:43
  • Have you tried to reset the zoom setting on your Firefox? Commented Mar 25, 2013 at 12:02
  • @Tobia - Yes, didn't work :( Commented Mar 25, 2013 at 12:08

2 Answers 2

Reset to default
1

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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?

Improve this answer

8 Comments

!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
@PawanNogariya - you have defined border's styles inline, you must change these values to get the desired thickness.
Then how I will be able to give only few cells 2px border while all other cells border 1px?
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.
@PawanNogariya - then modify your jsfiddle project to show us what exactly doesn't work.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.