Skip to main content
Solved

Feature Request - Horizontal Border Bottom

  • February 14, 2023
  • 3 replies
  • 179 views

Forum|alt.badge.img+2

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.

Best answer by Irrra

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)

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Irrra
Expert Problem Solver II
Forum|alt.badge.img+17
  • Expert Problem Solver II
  • 57 replies
  • Answer
  • February 15, 2023

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)


Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 1 reply
  • February 15, 2023
Irrra wrote:

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.


Didoagency
Contributor I
Forum|alt.badge.img+4
  • Contributor I
  • 1 reply
  • February 17, 2023
Irrra wrote:

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.