CSS for Table to add border (Not Table Records)
Application Type
Traditional Web

Hi, I have the common Table widget (not table records) and I need the table has a common border like in the excel, I tried to just change the border to 1px in the table but it turns out only the side not every cell. After that I tried to change cell border but It's like doubled and separated from each cell. How to change that to be like common excel border?

This is my result

Solution

What you did from the W3School Reference is the correct but the table is not showing on Browser because the Table is blank. I think the blank table doesn't display the cell. 


Can you try this by filling the table with data. Try with demo data first, then try to use <space>, and  


Please share the results of all cases if it doesn't solve the problem

mvp_badge
MVP

Hi Jason,

Did you tried css class?

You can refer css class for the same. i am sharing here also,

https://www.w3schools.com/css/css_table.asp

Thanks.

Hi, I tried to use border collapse like in w3school and in the outsystems it seems fine

but when i open in web browser, it doesnt show anything
Here my css

table, td, th {
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}

and I just applying the table class to my table style

mvp_badge
MVP

Ok, can you please try to debug and check why css is not applying may be some error( or overlapping css).

Sorry where do I need to put the breakpoint? sorry i'm still learning. Or how to check the css that applied like you mention?

mvp_badge
MVP

Ok, No problem. Happy to help you!

I was referring browser debugging, please refer below url,

https://javascript.info/debugging-chrome

Thanks

is this what you mean to find the class table that overlap?

Dear Jason

Greetings for the day!

Can you please make this screen accessible to all and share the URL? I will create the CSS for you and share that will work fine. Or simply share the OML here.


Thanks 

Hi Manis,

Here is my oml..


Basic3.oml

Solution

What you did from the W3School Reference is the correct but the table is not showing on Browser because the Table is blank. I think the blank table doesn't display the cell. 


Can you try this by filling the table with data. Try with demo data first, then try to use <space>, and  


Please share the results of all cases if it doesn't solve the problem

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.