# Wrap the data of the table component

**URL:** <https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [January 29, 2025, 11:14am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627 "2025-01-29T11:14:43Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dharmil](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dharmil/32/84583_2.png) [@Dharmil](https://community.glideapps.com/u/Dharmil)\
**Post date:** [January 29, 2025, 11:14am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/1 "2025-01-29T11:14:43Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/0/40e85da52127c0227bc3b47687e8876b80ba7949.png)  
How can I wrap data inside a column in the Table component using CSS?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 29, 2025, 7:16pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/2 "2025-01-29T19:16:38Z")

</div>

With Ctrl + Shift + C, you need to find the button and the span of the long text:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abd649a3eeba3c43b9d5008697869df3bab8db65.png)

Double-click on the button’s classes and copy.

Go to settings, appearence, custom css, add a dot “.”, paste and replace spaces by dots “.”:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba73e4c2a9cedcb5ff9ae7022f5c0f2dc5308477.png)  
Add `white-space: break-spaces;`

---

<div class="post-metadata">

**Author:** ![Dharmil](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dharmil/32/84583_2.png) [@Dharmil](https://community.glideapps.com/u/Dharmil)\
**Post date:** [January 30, 2025, 5:49am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/3 "2025-01-30T05:49:06Z")

</div>

> [@MaximeBaker](#):
>
> white-space: break-spaces;

Thanks!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 30, 2025, 12:43pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/4 "2025-01-30T12:43:59Z")

</div>

Anytime!

---

<div class="post-metadata">

**Author:** ![Dharmil](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dharmil/32/84583_2.png) [@Dharmil](https://community.glideapps.com/u/Dharmil)\
**Post date:** [January 31, 2025, 7:28am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/5 "2025-01-31T07:28:50Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/42f072812cfb7b347204b8f11d2c4ba98531c59f.png)  
Is there anyway that the type tags i could wrap?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 31, 2025, 12:12pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/6 "2025-01-31T12:12:33Z")

</div>

Same thing to find the element. But select the parent div where all the tag divs are. Then use these CSS properties:

```css
display:flex;
flex-wrap: wrap;

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 1, 2025, 12:42am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/7 "2025-02-01T00:42:16Z")

</div>

You seem to be having random parts of the class name in there. Those can change time to time, and are not guaranteed to be the same on different devices.

It should be something like:

```auto
div[class*="new-table___StyledButton"] {
white-space: break-spaces;
}

```

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 1, 2025, 12:53am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/8 "2025-02-01T00:53:56Z")

</div>

Yeah but it will affect all the columns…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 1, 2025, 12:55am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/9 "2025-02-01T00:55:04Z")

</div>

@Dharmil Do you want it to wrap for only a specific column?

I would find it weird if it wraps only for one and not all the columns.

---

<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:** [February 1, 2025, 2:46am UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/10 "2025-02-01T02:46:08Z")

</div>

It is better to involve the parent first, namely the selector `td:nth-child(n)` for a specific column order or just `td` to select all columns.

---

<div class="post-metadata">

**Author:** ![Dharmil](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dharmil/32/84583_2.png) [@Dharmil](https://community.glideapps.com/u/Dharmil)\
**Post date:** [February 3, 2025, 1:42pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/11 "2025-02-03T13:42:24Z")

</div>

Yes, it would be okay to be wraped for all the columns

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 3, 2025, 1:44pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/12 "2025-02-03T13:44:07Z")

</div>

Then I think this would work.

```auto
div[class*="new-table___StyledButton"] {
white-space: break-spaces;
}

```

---

<div class="post-metadata">

**Author:** ![Dharmil](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dharmil/32/84583_2.png) [@Dharmil](https://community.glideapps.com/u/Dharmil)\
**Post date:** [February 3, 2025, 2:01pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/13 "2025-02-03T14:01:06Z")

</div>

> [@MaximeBaker](#):
>
> ```auto
> display:flex;
> flex-wrap: wrap;
> 
> ```

Thanks! it works

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 3, 2025, 8:08pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/14 "2025-02-03T20:08:37Z")

</div>

Anytime!

---

<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:** [February 10, 2025, 8:09pm UTC](https://community.glideapps.com/t/wrap-the-data-of-the-table-component/79627/15 "2025-02-10T20:09:12Z")

</div>

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