Setting the border in tables

Apps (Frontend)
1

Hello my dear App-Builders,

I want to create borders between the columns of my table in an app. I started a first try with the CustomComponent CustomCellHighlighting and the borderTop element worked well. Now I wanted to set the border on the right (or left) to get a border from the top of the column to the bottom but it didn’t worked with “borderRight” in the row_format_json.
Is there another way to solve it? I thought it will work with borderRight, because there’s a similar CSS Property: border-right - CSS | MDN

Thank you very much!

2

Hi Marcel, what exactly is not working do you have a screenshot? I’m afraid I don’t have an answer to your specific question, but maybe Fixed Columns will help you a bit? https://apps.teams.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/TableElement.html#config-fixedcolumns

3

Hey Kyra,
here is a screenshot of my table.
I need the lines between the columns, I marked them with a blue arrow.
Fixed Columns are not an option, because we need the columns resizable…

Bildschirmfoto 2022-07-18 um 13.31.57
Bildschirmfoto 2022-07-18 um 13.31.571590×1066 30 KB

4

There is no way i know to do this with the CC but you could use CSS:
#yourTableContainer tr td:nth-child(1n) {border-left: 1px solid black}
#yourTableContainer tr td:first-child { border-left:none;}
#yourTableContainer tr td:last-child { border-left:none;}

5

You can set the borders for the table globally, in global:

"columnStyles": [
     {
        "name": "col_1",        
        "table": {          
          "border-right": "1px solid"
        }
      }
    ]