Table width:auto CSS

Hi,

I have a table in a section.
I would like to set parameters to tables "width :auto“, depend on section width(for responsive design).
When I create table on Volt/LeaP environment I have to set parameter "width" in "em".
Then I have tried to change “width” of this table using chrome dev tools, but it is only possible to a set value to “width” in px.
width:auto does not work


How to make table with work dynamically?


Thank you for any help

I think that this is an enhancement request for HCL.

I am also interested in this issue so I created a sample app where I added CSS class "mytable" to my form-table:

The problem is, that this class is assigned to a <div> which contains the whole widget: tabular data, title, buttons, etc. - obviously this intuitive way does not work.

Further analysis revealed that the core issue is that Leap uses a static value of 624px (in my case) for <div> which represents the tabular data:

Also the subsequent HTML elements have their width computed at form design time... In theory you can try to overwrite everything in your custom CSS but it would be an annoying job. All Leap themes seems to work the same way.

It would be much better if HCL adds an option to allow elastic or responsive rendering of tables.

Hi Jan,

thanks for the detailed answer. I will try to overwrite my CSS. I totally agree that would be much better if HCL adds an option to allow responsive rendering of tables. Tables are used very often.

Best Regards

Andrei