# How to properly adjust table widths

**URL:** <https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [October 15, 2024, 7:28am UTC](https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921 "2024-10-15T07:28:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rice](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rice/32/11161_2.png) [@rice](https://community.weweb.io/u/rice)\
**Post date:** [October 15, 2024, 7:28am UTC](https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921/1 "2024-10-15T07:28:38Z")

</div>

Hello

I am struggling with WeWeb tables. I am trying to keep the headers and the collection data fixed but I can’t figure this out for the life of me. I am tempted to set fixed px values for the widths but this leads to issues with larger screens/smaller screens. Can someone tell me what I am doing wrong or how can I best set this up?

 ![Screenshot 2024-10-15 032324](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1615fa427ef176bfbec131c1c17a90ed855879a1.png)  
 ![Screenshot 2024-10-15 032359](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c77c18b294ab88c85003db879c36664c7da6c666.png)  
 ![Screenshot 2024-10-15 032416](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/aa9dda36e83089f818e767fd85d201d21f8d8fac.png)

---

<div class="post-metadata">

**Author:** ![WeeeeeWeb](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/weeeeeweb/32/9689_2.png) [@WeeeeeWeb](https://community.weweb.io/u/WeeeeeWeb)\
**Post date:** [October 15, 2024, 9:37am UTC](https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921/2 "2024-10-15T09:37:09Z")

</div>

Hi,  
I am having the same issue right now. I am trying to use min-max width for this and also testing with %. I kind got it more or less, but not perfect yet, but so far the min-width has helped me a lot, specially for those columns where the data can have different number of characters.

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [October 15, 2024, 9:36pm UTC](https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921/3 "2024-10-15T21:36:52Z")

</div>

I’m not sure I have a solution, since it doesn’t address the problem, but I can share how I’ve built my tables and don’t have problems.

1. I have a div for the headers and a div for the `rows` (where I bind the collection of items) with a `row` nested below. I have display:grid set on the `header` and the `row`

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/501d5cc1a6059522043e9b8d5e7bd5a322aefaaa.png)

1. The `header` and `row` have the same grid defintion. One thing I think I learned is the styles within each need to be the same. For example, I had padding on the `col` in the `row` different than the `col` in the `header` at first.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f7027b78f4da4f0da6c2f1baabae2919fbe769d5.png)

1. The result is I appear to have perfectly lined up columns

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/770a7b274a578d5a283d8e83d36003c6f62c9b8e.jpeg)

---

<div class="post-metadata">

**Author:** ![Profound5753](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/profound5753/32/6870_2.png) [@Profound5753](https://community.weweb.io/u/Profound5753)\
**Post date:** [October 16, 2024, 12:40am UTC](https://community.weweb.io/t/how-to-properly-adjust-table-widths/13921/4 "2024-10-16T00:40:39Z")

</div>

I totally address this age-old issue with my coded-component. It’s a data table component that allows one to dynamically create columns, actively filter, and so much more. Let me know if you’d like to see a demo and more importantly, let me know if you’re interested in my coded-component bundle.

> [@Supercharge Your Business App Development: 25+ Coded Components & a LIVE Xano/WeWeb Cohort](https://community.weweb.io/t/supercharge-your-business-app-development-25-coded-components-a-live-xano-weweb-cohort/13892):
>
> Are you tired of endless coding and reinventing the wheel when building business applications? I have two exciting opportunities to help you build faster and smarter: 1. Access 25+ Ready-Made Coded Components: Stop wasting time on repetitive coding tasks! We’ve created over 25 pre-built, customizable components to accelerate your development process. These components cover essential features, letting you focus on your unique business logic. 2. Master Xano & WeWeb in a LIVE Cohort: Learn to b…
