# Full width table container?

**URL:** <https://community.glideapps.com/t/full-width-table-container/77263>\
**Category:** Ask for Help\
**Created:** [October 22, 2024, 10:28pm UTC](https://community.glideapps.com/t/full-width-table-container/77263 "2024-10-22T22:28:40Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 22, 2024, 10:28pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/1 "2024-10-22T22:28:40Z")

</div>

Hi, I have a full width container with a table collection inside. I’d like the table to be the full width of the screen. Any help is greatly appreciated. Thank you

---

<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:** [October 22, 2024, 11:10pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/2 "2024-10-22T23:10:38Z")

</div>

To get the largest layout possible, you could try adjusting the appearance in settings.

 ![Screenshot 2024-10-23 at 01.08.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/1902a5957c580e93bd79581396e68d5f87966622.jpeg)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [October 22, 2024, 11:58pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/3 "2024-10-22T23:58:51Z")

</div>

If you have access to CSS this may help

```auto
div[class*="section-container"] >div {
max-width: 100vw;
}

div[class*="container-padding-md"] {
max-width: 100vw;
}

```

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 1:40pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/4 "2024-10-23T13:40:27Z")

</div>

Thank you. These are the settings I currently have but the containers are not full width.

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 1:43pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/5 "2024-10-23T13:43:04Z")

</div>

> [@Eric\_Penn](#):
>
> ```auto
> div[class*="section-container"] >div {
> max-width: 100vw;
> }
> 
> div[class*="container-padding-md"] {
> max-width: 100vw;
> }
> 
> ```

Thank you. This works but the containers below are also full width. Is it possible I can just get the container holding the table to be full width?

---

<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:** [October 23, 2024, 2:02pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/6 "2024-10-23T14:02:16Z")

</div>

You need to give a class name to the container to isolate it.

> [@Full width Desktop - Containers](https://community.glideapps.com/t/full-width-desktop-containers/68194/27):
>
> #page-root .the-wide-container .normal { max-width: 95vw; } Css-class for container is “the-wide-container” Turn off compiled-css

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 2:48pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/8 "2024-10-23T14:48:41Z")

</div>

At least for me this doesn’t change the width of containers on the page. It brings them back to the default width.

Is the Content Width: Large setting in the appearance tab supposed to be full width?

---

<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:** [October 23, 2024, 2:51pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/9 "2024-10-23T14:51:53Z")

</div>

You should turn off the “use compiled CSS” button and turn on preview.  
For width you can use width: 100%.

 ![Screenshot 2024-10-21 at 23.44.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a0ce9de6c0cc4e5221a65140eab4373485237bb.png)

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 3:01pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/10 "2024-10-23T15:01:28Z")

</div>

Thank you. This works for all other containers except for the containers that hold tables. I only need the table container widths adjusted.

---

<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:** [October 23, 2024, 3:04pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/11 "2024-10-23T15:04:20Z")

</div>

Can you provide a screenshot of the left panel of your component so I don’t confuse what you mean. Have you named your container class “the-wide-container”?

 ![Screenshot 2024-10-23 at 22.06.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1f00fbf5e000d6e876f9a6da016cbad50b52a267.png)

 ![Screenshot 2024-10-23 at 22.09.15](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/eea432af25714633bb825143f016f076ecb4af07.png)

 ![Screenshot 2024-10-23 at 22.06.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dcb7665cde0b27c37a9279dfa5b8b4f8cc0432ab.jpeg)

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 3:14pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/12 "2024-10-23T15:14:51Z")

</div>

![Screenshot 2024-10-23 at 11.09.25 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/7/376997043cda5f4f136cd8920f8492cc5dc1363a.png)  
 ![Screenshot 2024-10-23 at 11.10.22 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4cffd90af678cf79bd37689b2797ca407229baf8.png)  
 ![Screenshot 2024-10-23 at 11.12.34 AM 1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6abaa9bfaac99272145afe6d2da044cf61bf1080.png)

I applied the class name to the surrounding containers to test and it works on those containers that don’t contain a table.

---

<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:** [October 23, 2024, 3:17pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/13 "2024-10-23T15:17:21Z")

</div>

The function of the class name is to limit the application of custom CSS to only the components you desire. Do not apply it to all containers if you don’t intend to.

Could you show what your table looks like? Is there any column width configuration that is causing your table width to become fixed?

---

<div class="post-metadata">

**Author:** ![ataha88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ataha88/32/81036_2.png) [@ataha88](https://community.glideapps.com/u/ataha88)\
**Post date:** [October 23, 2024, 3:30pm UTC](https://community.glideapps.com/t/full-width-table-container/77263/14 "2024-10-23T15:30:16Z")

</div>

Ok, now it works. I deleted the old container and created a new one. For whatever reason putting the table in the new container worked correctly.

Thank you for your patience and your assistance. This looks good.
