is it possible to even the size of the columns of multiple DataTables?(auto layout)

elazard

hey guys

Basically title : I have several DataTables on a page (they have the same number of columns, just the data isn't always the same size) and I would like their columns to share width. I use an auto layout for responsiveness purpose for each of them (I know that I can solve this problem using individual column width but I already tried and it just looked bad on some lower res monitors)
I would like to know if it's possible the have the plugin calculate the optimal width for columns but across multiple tables.

to illustrate what I want : https://datatables.net/examples/basic_init/multiple_tables.html I would like to make the two "name" columns the same size, the two "positions" columns the same size and so on

thank you very much in advance

colin

Hi @elazard ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

elazard

Hey Colin, thank you very for your reply and my bad, I didn't know a test case was required if I had another way to illustrate my question.

So here is the test case http://live.datatables.net/letezozu/1/edit
basically as you can see the column width isn't the same across different tables and that's the effect I am looking for : using an auto layout (for responsiveness purpose, we have really old monitor on some computers at work) but across several table. Basically having Datatables calculate the optimal width of each column for all the tables (I would have around 10 on the same page) before displaying them.

thanks for your help

colin

Hi @elazard ,

Thanks for that demo - that helps. If you use columns.width then you can set it as a percentage to get equal spacing - see here.

Cheers,

Colin

elazard

Hey Colin,

The issue is that I don't know in advance the length of the data that will have to be displayed in each column that's why I am looking for an effect to "layout : auto" in html/Css but that take into account several tables at the same time.
It seems it isn't possible in pure html/Css so I am wondering if it is doable with datables.
In my example I don't know that "Tiger Nixon the first of his name" will be longer than the rest and mess the layout. it could very well be the salary of garret winters of the first table that becomes 100000000.

thank you for your help !

colin

Hi @elazard ,

Did you miss the link in my message above - that is dealing with both those scenarios.

Cheers,

Colin

elazard

hey Colin,

No i didnt or at least I don't think so! If i understood your answer correctly, the solution is through

columnDefs: [{ targets: '_all', width: "16%" }]

to fix all column to a width of 16%. that's not what I am looking for (or I would just use layout: fixed in my css and be done with it)
i want the width of the columns to dynamically defined depending on the content of the columns, some need to have like a width of 4% some maybe 20% but that's something I can not know in advance. (once again the same behavior as layout: auto but for several tables)

i am probably stuck behind the language barrier and just don't explain well enough please tell me if I can be more clear.

Thanks for your help

colin

Hi @elazard ,

I understand - you want the optimum column width considering all columns across multiple tables. I'm afraid that's not possible, as each table is considered in isolation, and the width can only be manually set at initialisation. The only way I can think of keeping them the same, would be as a '%', as in my example,

Cheers,

Colin

elazard

Hello Colin,

Thanks a lot for your answer ! now I know for sure

thanks again for your time