# Table collection – Column Header on 2 Lines

**URL:** <https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711>\
**Category:** Ask for Help\
**Created:** [November 7, 2024, 12:14pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711 "2024-11-07T12:14:09Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 12:14pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/1 "2024-11-07T12:14:10Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/6/4619ad37c3b9124734dc77f3d630e84df38c6d8d.png)

Big thanks!

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [November 7, 2024, 12:26pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/2 "2024-11-07T12:26:44Z")

</div>

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 🤔 🙂

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?

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 12:33pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/3 "2024-11-07T12:33:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 12:42pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/4 "2024-11-07T12:42:32Z")

</div>

Upd with image

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [November 7, 2024, 12:58pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/5 "2024-11-07T12:58:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 1:11pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/6 "2024-11-07T13:11:56Z")

</div>

> [@nathanaelb](#):
>
> have you considered a Big Numbers component instead?

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 7, 2024, 1:36pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/7 "2024-11-07T13:36:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 1:39pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/8 "2024-11-07T13:39:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 7, 2024, 1:44pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/9 "2024-11-07T13:44:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 1:46pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/10 "2024-11-07T13:46:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 7, 2024, 1:50pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/11 "2024-11-07T13:50:26Z")

</div>

class name: **newTable**

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 1:52pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/12 "2024-11-07T13:52:28Z")

</div>

Wow will test it thanks!

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 2:07pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/13 "2024-11-07T14:07:56Z")

</div>

> [@Himaladin](#):
>
> newTable

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/9926d74d79d6beef36d1856b779cc884ece5d23c.png)

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 7, 2024, 2:10pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/14 "2024-11-07T14:10:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [November 7, 2024, 2:46pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/15 "2024-11-07T14:46:11Z")

</div>

Above screen is width auto

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 7, 2024, 3:04pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/16 "2024-11-07T15:04:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 14, 2024, 3:05pm UTC](https://community.glideapps.com/t/table-collection-column-header-on-2-lines/77711/17 "2024-11-14T15:05:27Z")

</div>

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