Question Re: Changing Table Borders in CSS in Technology Q&A

Changing Table Borders in CSS

martin_chambers — Thu, 03 Mar 2016 16:05:32 GMT

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

Re: Changing Table Borders in CSS

Former Member — Thu, 03 Mar 2016 16:16:26 GMT

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.

Re: Changing Table Borders in CSS

Former Member — Fri, 04 Mar 2016 06:47:30 GMT

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

Re: Changing Table Borders in CSS

martin_chambers — Fri, 04 Mar 2016 14:43:22 GMT

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

Re: Changing Table Borders in CSS

Former Member — Fri, 04 Mar 2016 15:27:48 GMT

.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.

Re: Changing Table Borders in CSS

Former Member — Sat, 05 Mar 2016 15:34:39 GMT

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

Re: Changing Table Borders in CSS

martin_chambers — Thu, 10 Mar 2016 14:01:20 GMT

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