How to shrink and center a table block

[kelshaer]

The table looks off. Is there a way to adjust the width of the last column so it matches the previous ones and for the whole table to be centered in the page? I think if there is an option to shrink and center the whole block.

[Astghik]

Hi @kelshaer, could you please provide your published app URL so I can try to customize it with a custom code?

[kelshaer]

Thanks @Astghik but I am on a free softr plan so custom code is not an option.
I replaced the table with a list block. I left the post to learn.

[Stan]

Hi @kelshaer,
I hope I am understanding your query correctly. One way I have worked with the column widths is to edit the block so that the width is changed for each column. See the screenshots below.

I have also rearranged the columns by moving the item fields into different orders. I use this when the table labels are different sizes, but that does not seem to be your need here. Hope this helps for the widths.

[kelshaer]

Thank you but still the last column’s width will take the resto of the page. What I was hoping for is to reduce the width of table block and center it in the page.

[Stan]

I see. Sorry to misunderstand your need. Until you are able to reduce the width of the table block you may want to adjust all the column widths of your table so that they are equal. It is not optimal but it makes the table more symmetrical.

[matthieu_chateau]

Hi,

You can shrink the whole table block this way, if you would have custom code enabled.
I know you don’t but just to show you the results =>

<style>
 #table1 {
  width: 1000px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  #table1 {
    width: auto;
    margin: 0;
  }
}
</style>

To be placed in the header custom code of the page.
Just replace table1 by the name/id of your block.
Play with 1000px to meet your needs.
The code is made to disable the shrinking effect on mobile.

You can also play with the width of the columns of the table block (in the Softr studio, no coding required) to find the perfect setup for your use case while using the code above.

Two examples here: https://test-play.softr.app/table-shrink
The first table has a width set to 1000px and the second table has a 800px width.