# Custom CSS for table width?

**URL:** <https://community.glideapps.com/t/custom-css-for-table-width/74606>\
**Category:** Ask for Help\
**Created:** [July 3, 2024, 10:30pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606 "2024-07-03T22:30:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 3, 2024, 10:30pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/1 "2024-07-03T22:30:17Z")

</div>

The new tables look great however i’m unsure how to make the table take up the entire width of the screen.

I have the css class for the tables set to make the width 98% but it does not make the table stretch to the width of the screen, just the container for the table.

i took a look at the html and it looks like the table has an additional Div.wire-container that my css is not altering. Is there a way to figure out how to change that div css?

I’m completely lost.

Thank you for your time

Nathan,

 ![table](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/575a46d0b1550c354ae828a98ac5abe3c246190d.png)

---

<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:** [July 3, 2024, 11:41pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/2 "2024-07-03T23:41:35Z")

</div>

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

What content width are you using in your Settings \> Appearance?

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 4, 2024, 5:09am UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/3 "2024-07-04T05:09:30Z")

</div>

I am using Large currently.

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 4, 2024, 7:38am UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/4 "2024-07-04T07:38:17Z")

</div>

Sorry, The tables are not within a container at this time, my mistake.

---

<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:** [July 5, 2024, 12:22am UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/5 "2024-07-05T00:22:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/18da36caa8654017f551af81e83fdeba459d8d43.png)

Can you share your configurations? I’m not able to reproduce your screenshot.

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 5, 2024, 12:13pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/6 "2024-07-05T12:13:58Z")

</div>

For the table in the css class I put a random name “ultrawide98”

Then in settings - \> Appearance - \> Custom CSS

.ultrawide98 {  
width: 98%!important;  
}

 ![Screenshot from 2024-07-05 08-11-18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/16cc861434f509b58b4537f0e392da167b98952d.jpeg)  
 ![Screenshot from 2024-07-05 08-12-51](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b6e3071c32404eee865398a41b9e24347eb161be.png)

---

<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:** [July 5, 2024, 1:09pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/7 "2024-07-05T13:09:42Z")

</div>

You should turn on “Preview custom CSS” to see if it makes a difference.

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 5, 2024, 1:37pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/8 "2024-07-05T13:37:59Z")

</div>

I have, it does effect the width but not the actual table within.

I changed the background color to show you what its doing.

 ![Screenshot from 2024-07-05 09-37-30](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62cbe7b2ab4f1fa2caf284da64bb8ae3dd98736b.jpeg)

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 5, 2024, 2:34pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/9 "2024-07-05T14:34:42Z")

</div>

I think i figured it out.

I have to override the main div of the page

#main-root div[class\*=“justify-center”] {  
–container-x-pad: 10px;  
max-width: 95vw;  
}

…that was giving me a headache lol

Thank you for your help

---

<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:** [July 5, 2024, 5:20pm UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/10 "2024-07-05T17:20:37Z")

</div>

This should work for containers

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

```

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 6, 2024, 11:42am UTC](https://community.glideapps.com/t/custom-css-for-table-width/74606/12 "2024-07-06T11:42:34Z")

</div>

Thanks for the help.

That made a big difference.