Table collection – Column Header on 2 Lines

Ask for Help
1

Hi there!
I remember some one solve it by css but i can’t see it in the Community.
Please point me or give some suggestions.

Two rows Header
Two rows Header1232×348 34 KB

Big thanks!

2

Okay from now on when I see “with CSS”, I’ll suggest “have you tried the custom AI component”? I wonder if this can be hardcoded into the forum :thinking: :slightly_smiling_face:

But seriously, have you tried the custom AI component?

Would you mind clarifying what you mean by “Two rows Table collection Header”, or would you have a screenshot of what you mean?

3

Thanks, @nathanaelb for income!
I spend so many hours, days, trying to tell Glige AI component to understand me and i find it is much more effectivelly to craft it by another way. Glide AI component is greate for simple cases and not for production for now.

4

Upd with image

5

Ah. In your original post I think I read “Custom collection”. I possibly misread. But this is a collection with the style table and you want to put the column header on two lines.

I wouldn’t know. I’m a little of a goody two-shoes – or at least rule-abiding, let’s make it less pejorative – in that I usually try to avoid to attempt something that’s not meant to be attempted. Really the column header isn’t supposed to display two lines, so I personally would just avoid wanting that.

I noticed you want to see the total, have you considered a Big Numbers component instead?

6

No, for BIG Number - no. It is very common practice to see column totals in top of the column in each column.

1 Like
7

@slscustom.ru, is your total of $750 static data?

8

Normally is Rollup column
I will be surprised to know that it is impossible to allow wrapping in header

9

Theoretically, it is not possible to make it two lines for the header. If this is a wrapping issue, it is highly influenced by the width of your column and can be achieved with CSS.

10

Yes i mean to set width enough to wrapping and use css to allow wrapping
This is in ultra demand

11

class name: newTable

.newTable table > tbody:nth-child(1) > tr:nth-child(1) > td {
  vertical-align: top;
}
.newTable table > tbody:nth-child(1) > tr > td > button > span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}

/*Adjust column width*/
.newTable table > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) {
  min-width: 6rem;
}
3 Likes
12

Wow will test it thanks!

1 Like
13

image
image853×278 16.9 KB

One million thanks @Himaladin! It works also with auto width, not perfect, but enough! Thanks!!!

1 Like
14

Yes, you cannot use ‘auto’ for the width. If you look at the last code, there is td:nth-child(3). This refers to the column order.

15

Above screen is width auto

1 Like
16

If your word breaks have the same average width, you can use min-width and max-width constraints. And remove :nth-child(3), it will apply to all columns.
Using auto may behave differently when dealing with different screen sizes.

1 Like
17

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.