Col Header with 2 Lines using <br> breaks table alignment

Tags: #<Tag:0x00007f51b945bae8> #<Tag:0x00007f51b945b7f0>
#1

Hello,

I am trying to make a table with a column header that has two lines, and I followed the advice from this post: Header text on 2 lines to use <br> in the column header.

However, when I do this it breaks the alignment of the entire table, as the header column on the left hand side is now one pixel shorter than the other columns with 2-lined headers. The border on the adjacent column also disappears (see screenshot below):

19%E2%80%AFPM
Screenshot 2025-03-05 at 4.35.19 PM.png1446×442 33.5 KB

Please let me know if there are any alternative solutions to supporting a 2-lined header that does not compromise the rest of the table.

#2

Also, is there anyway to apply inline styling to remove the bolding to the second line?

#3

Hi @george1

I also recommend adding columnHeaderHeight value so it automatically stretches the column height.

Ref: https://handsontable.com/docs/javascript-data-grid/api/options/#columnheaderheight