Table Row Height

Apliqo UX
#1

Hi all,

Has anyone come across a good way to create some extra top/bottom padding on rows in a table? I believe the row height is currently auto-sized but in certain cases, it would be helpful to have a bit more padding above/below (e.g., subtotal line). I tried defining a custom class using “padding-bottom” and it appears to somewhat work on the body of the table but the first column with row dimension elements ends up getting a different padding. Thank you in advance for any suggestions!

image
image
image

#2

Hi Wei,
I just tried this out and there seems to be an issue with the calculation of the correct size when applying the padding. We will look into this. In the meantime you might get the desired result by either using “line-height” (test-row class in code below) or reverting the padding-bottom with an additional class in combination with rowheader (test-row2 class in code below).

.handsontable td.row-test {
  line-height: 50px !important;
}

.handsontable td.row-test2 {
  padding-bottom: 20px;
}
.handsontable td.row-test2.rowheader {
  padding-bottom: 0px;
}

Cheers,
Andreas

#3

Thanks Andreas! Your first suggestion of using “line-height” works great! I had been playing around with trying to use “rowHeights” but “line-height” seems to do the job much better!