Solved

Feature Request - Horizontal Border Bottom

  • 15 February 2023
  • 3 replies
  • 135 views

Badge +1

Hello,

 

In the Dynamic Table editor, within Table Setting → Cell Style there’s an option for a horizontal border, but there is no toggle for top border or bottom border. By default it hard-codes it as a top border, but our design uses a bottom border. I tried working around it with custom css and the static row option but neither were viable options.

 

Thank you.

icon

Best answer by Irrra 15 February 2023, 17:00

View original

3 replies

Userlevel 5
Badge +15

Hi @colin-jpms!
You can try this code

kd-dynamic-table td {

    border-top: none !important;

    border-bottom: 1px solid #000000;

}

In the CSS code above, we're first removing the top border from the table cells using border-top: none !important;. Then, we're adding a bottom border to the cells with border-bottom: 1px solid #000000;. You can customize the color and thickness of the border to your preference.

Save the custom CSS and preview your Dynamic Table to ensure the bottom border is displaying as expected.

This should add a bottom border to your table cells and remove the top border that's hard-coded by default. If you need to apply a different border style or color to specific cells, you can add additional CSS rules to target those cells by their class or ID.
I hope I was able to help you)

Badge +1

Hi @colin-jpms!
You can try this code

kd-dynamic-table td {     border-top: none !important;     border-bottom: 1px solid #000000; }
In the CSS code above, we're first removing the top border from the table cells using border-top: none !important;. Then, we're adding a bottom border to the cells with border-bottom: 1px solid #000000;. You can customize the color and thickness of the border to your preference.

Save the custom CSS and preview your Dynamic Table to ensure the bottom border is displaying as expected.

This should add a bottom border to your table cells and remove the top border that's hard-coded by default. If you need to apply a different border style or color to specific cells, you can add additional CSS rules to target those cells by their class or ID.
I hope I was able to help you)

Hi @Irrra 

Thank you for the response, but I wasn’t able to get it to work. I do not see a “kd-dynamic-table” class in the HTML, nor any class with “dynamic”. I had tried a similar idea utilizing the “kl-table-subblock” class which wraps the dynamic table cells, which worked to an extent, but we use dynamic tables in our header, so the border bottom was appearing there as well which we do not want.

Badge +4

Hi @colin-jpms!
You can try this code

kd-dynamic-table td {     border-top: none !important;     border-bottom: 1px solid #000000; }
In the CSS code above, we're first removing the top border from the table cells using border-top: none !important;. Then, we're adding a bottom border to the cells with border-bottom: 1px solid #000000;. You can customize the color and thickness of the border to your preference.

Save the custom CSS and preview your Dynamic Table to ensure the bottom border is displaying as expected.

This should add a bottom border to your table cells and remove the top border that's hard-coded by default. If you need to apply a different border style or color to specific cells, you can add additional CSS rules to target those cells by their class or ID.
I hope I was able to help you)

Thank you, good to know.

Reply