88
Views
11
Comments
Solved
Table all Border Black css

Hi guys 

I am working on outsystems table i want to make all borders black and i have give a css calss

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

you can see the picture the bottom border is not black and in between columns and rows borders are more darker.

But i need the table as in below image, I mean all borders should be equal.

2023-03-03 06-59-12
Reemali patil
Solution

Hi nani,

Now its works fine, kindly check the attached oml.

hope this will resolve your problem

regards.

border.oml
UserImage.jpg
Nani
Solution

Hi guys,

Thank you for your time i really appreciate you guys.

what ever you guys posted the answers are closer to my requirement but not perfect.

I have made some change to the Reemali patil Oml css its working fine

.table  {
border: 1px solid black;
border-collapse: collapse;
}

.table-row td{    
border: 1px solid black;
}

.table-header th{
border: 1px solid black;

}

All borders are equal black and size.

2025-09-04 06-33-37
Nikhil___Vijay

Hello @nani 

"I used the same class you shared with me and it worked for me."

https://personal-zju7lmqr.outsystemscloud.com/Demo/Screen1?_ts=638404847273055552

"Can you please share the .oml file where you faced the issue?"

"I am sharing my OML with you"

"I am sharing a URL for reference."

https://www.outsystems.com/forums/discussion/48221/table-without-borders/

Regards 

Nikhil kumar vijay

Demo.oml
UserImage.jpg
Nani

Thank you for time.

look the the outer borders and vertical borders are bit darker then others.

2023-03-03 06-59-12
Reemali patil

Hi Nani,

you can try a more specific CSS rule for the table, td, and th elements. Here's an example of how you can achieve this:

/* Apply black border to all table elements */

table {

  border-collapse: collapse;

}

/* Apply black border to all table cells */

table, th, td {

  border: 1px solid black;

}

/* Apply a specific border color to the bottom of the table */

table {

  border-bottom: 1px solid black;

}


Hope this helps you !!

Regards,

Reemali.


UserImage.jpg
Nani

I have applied css which you have given but its not proper. look at the inner and bottom border is lighter.

2023-03-03 06-59-12
Reemali patil
Solution

Hi nani,

Now its works fine, kindly check the attached oml.

hope this will resolve your problem

regards.

border.oml
2023-05-23 04-55-55
Wasimkhan Syed Abuthahir

Hi,

Along with @Reemali patil answer, try adding below css for rows.

.table-row td {

border: 1px solid black; 

 }


Regards,

Wasimkhan S

2024-06-24 04-49-49
Princi

Hey @nani 

Please check these CSS in your code.

.table {

    border: 1px solid black;

}

.table th {

    border: 1px solid black;

}

You will get the same requirement which you are looking for. 

Hope this will help you out.

Regards

Prince Kumar

2025-09-04 06-33-37
Nikhil___Vijay

Hello @nani 

Here is the CSS I'm sharing with you. It should work. I've also included a demo link.

https://personal-zju7lmqr.outsystemscloud.com/Demo/Screen1?_ts=638404847273055552

td, th {

 border: 1px solid black;

border-width: 1px 0 1px 1px;

}

.table{    

border-right: 1px solid black;

}

"I hope this works for you."

Regards 

Nikhil kumar vijay

UserImage.jpg
Sudarshan HD

Hi  @nani 

CSS you wrote is correct for header cell and body but for whole table you can easily give the border through styles like below

then you can get the border like below its a easy way

Hope its help.

UserImage.jpg
Nani

I know but if see clearly the vertical borders size is little big when you compare horizontal borders.

UserImage.jpg
Nani
Solution

Hi guys,

Thank you for your time i really appreciate you guys.

what ever you guys posted the answers are closer to my requirement but not perfect.

I have made some change to the Reemali patil Oml css its working fine

.table  {
border: 1px solid black;
border-collapse: collapse;
}

.table-row td{    
border: 1px solid black;
}

.table-header th{
border: 1px solid black;

}

All borders are equal black and size.

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