Changing Table Borders in CSS

[martin_chambers]

After reading this http://scn.sap.com/community/businessobjects-design-studio/blog/2013/07/21/design-studio I tried to apply David's ideas to my own table.

Originally it looked like this. Notice the thick borders for the header area! I really want them to be much thinner.

I created my own table class in CSS. As I failed to make the header borders thinner, I tried to get rid of them altogether. I applied "border: none" to every table class I could find.

The result looks like this. I have managed to disappear some of the borders. But the header borders are still too thick!

Can anyone tell me what I'm doing wrong? Any help will be appreciated.

Regards,

Martin

[Former Member · Accepted solution]

Hi Martin,

Are you written any other custom css for table. how you getting thick border, by default??. Can you give some explanation on this.

Thanks,

Nithyanandam

[martin_chambers · Accepted solution]

Hi Nithyanandam,

Yes, I have written a custom CSS.

To check whether this had any unintended results, I deleted everything in the custom CSS and the thick border lines disappeared.

I then proceeded to  comment /*   */ bits of my custom CSS until I found the guilty code.

Apparently, this line which I had added to create a border line around each part of the "Grid Layout" component was causing all my troubles.

.grid_lines td, tr, th { border: 1px solid #D9D9D9; border-collapse: collapse; }

I still don't understand why. This border is after all only 1 pixel.

Anyone know?

Martin

[Former Member · Accepted solution]

.grid_lines td, tr, th will impact all TR, TD and TH in the grid, along with every component.

Try to use target only those in the grid layout by using > (direct children) and maybe the td / tr / th classes associated with the grid layout.

[Former Member · Accepted solution]

Hi Martin,

You have written CSS in more general way. Instead of being too specif, which may caused the effect. I think it added above the every td's again and again. you have added tr which includes th which includes td. so this 3 would have made it as 3px. I think something like that would have happend.

Hope this clears your doubt.

Thanks,

Nithyanandam

[martin_chambers · Accepted solution]

Hi Frank,

I tried your suggestion. The result is definitely different. It's just not quite what I wanted.

.grid_lines td > { border:1px solid #D9D9D9; border-collapse: collapse; }

How can I make my custom class .grid_lines more specific?

Alternatively, do you know which classes are used for the grid layout?

Regards,

Martin

[Former Member]

I would advise to inspect the html code and CSS attribute leading to the thick borders.

Either in Chrome or IE, you can inspect them and deactivate the CSS properties. Once you've found where they are seated, you'll be able to overwrite them.