Hi All,

For a TableRecords widget (Traditional Web) how does one vary the Row spacing/margin to allow for more spread-apart looking rows?


Thanks.

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}


Thanks.


Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}


Thanks.


That sounds useful - however - how would I apply the class ExtraSpace to the Row?

Hi Olivier,


this is good introduction to styling, see around 10 min mark to options about applying styles to elements.


https://www.outsystems.com/learn/lesson/1756/themes-and-styling


Dorine

Olivier Levine wrote:

Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}


Thanks.


That sounds useful - however - how would I apply the class ExtraSpace to the Row?

Hi Oliver,

You can do it like this:


You can also use conditions based on the current record.

Paulo Jadaugy wrote:

Olivier Levine wrote:

Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}


Thanks.


That sounds useful - however - how would I apply the class ExtraSpace to the Row?

Hi Oliver,

You can do it like this:


You can also use conditions based on the current record.

That didn't work.


Hi Olivier,

I can't seem to get it working with td element, but what works is following

1° make css

.BiggerRow div {
  padding: 20px;
}

2° enclose table cell content in div  

3° apply the class to the table

see attached oml

Dorine Boudry wrote:

Hi Olivier,

I can't seem to get it working with td element, but what works is following

1° make css

.BiggerRow div {
  padding: 20px;
}

2° enclose table cell content in div  

3° apply the class to the table

see attached oml

I meant the spacing Between rows - sorry.


Solution

You have to force the style with !important.
Attached is an example.

Let me know if this is what you need.

Thanks.

Solution