[Support request] Wrapping Problems with jquery DataTables

[CRISTOBAL]

Good morning,

When you add datatables to any page, set to 100%, it does not wrap.

The only way to wrap is using table-layout fixed, but then we lose responsiveness of Datatables.

Can you pelase check?

Thanks

[David]

Hi there,

i can’t access the link you have provided – this message:

“The page you are trying to access is restricted due to a security rule.”

[CRISTOBAL]

Please retry, I have disabled it.

[David]

The table is being given an inline width style of 1932px. Not sure if you can remove that in the code / plugin. If not give this CSS a shot:

table.dataTable {
    width: 100% !important;
}

[CRISTOBAL]

I have added it to Aditional CSS in customizer without success.

[David]

Tables are a real pain to make responsive. This article explains how to use table-layout: fixed and then set the columns to different % widths:

https://css-tricks.com/fixing-tables-long-strings/#article-header-id-2

[Maria Cecilia]

Hi, I ran into the same problem. Datatables was inserting an inline width on the table. I was able to fix it by setting the table width to 100%:
<table id="tour_table_1" class="display" style="width:100%">
After making that change the table was responsive. Before making that change DataTables was setting the inline width to 1133px but after I specified the width it no longer tried to override it.

[David]

Thanks for the feedback Jonathan, i am sure others may find this useful

[Author]

Posts