Adjust column width

[Kuroshi]

Hello I have a report DataPage specifically Tabular. It contains 20 fields in the results page. I tried to change the width of the specific field but it did not change anything. I also use CSS but with no luck. Can you help?

[Barbie]

Hello @Kuroshi,

If the width of the Tabular report exceeds the width of the screen, if you try to adjust the width of any fields inside the DataPage itself, it will not be possible. But I have found a solution that you can use. Please use the CSS code below:
 

table[data-cb-name^="cbTable"] tbody tr.cbResultSetTableHeader th:nth-child(5)
{
padding: 1px 120px !important;
}

You can change the number inside the nth-child(5) based on the position of the field.

 

I hope this works. 

[Barbie]

By the way, just to add, we can actually change some layouts and designs of your forms and reports inside the style itself. You may refer to this: https://howto.caspio.com/styles/styles/

[RuisiHansamu]

Hi there, I would like to share this forum post that is helpful and it worked out pretty good on my end. 

 

Sharing is caring.   

[cheonsa]

On 6/23/2021 at 11:34 PM, Barbie said:

Hello @Kuroshi,

If the width of the Tabular report exceeds the width of the screen, if you try to adjust the width of any fields inside the DataPage itself, it will not be possible. But I have found a solution that you can use. Please use the CSS code below:
 

table[data-cb-name^="cbTable"] tbody tr.cbResultSetTableHeader th:nth-child(5)
{
padding: 1px 120px !important;
}

You can change the number inside the nth-child(5) based on the position of the field.

 

I hope this works. 

 In addition to this, if the sticky header is enabled in your Tabular Report, you also need to add this code:

table[id*='FreezeTabularHeaderObj'] > tr > th:nth-child(5) {
    padding: 1px 120px !important;
}

 

[cheonsa]

Hello!

I just wanted to share with you the solution to adjust the width of the frozen columns.