CODEWITHSUNDEEP
javascriptjquerycssdatatables
Michal
Michal

Reputation: 2039

JQuery Datatables columns overflow

I have problem with my datatable: it has to have a specific width, but also I want to display all its columns. The whole issue looks like this:

overflow

I found solutions Datatables Width Overflow For A Lot Of Columns and JQuery Datatables overflow, but I would rather use word breaking then have a scrollbar in my table.

So, I found another solution jQuery DataTable overflow and text-wrapping issues according to which i had to set:

  table.display { table-layout:fixed; }
  th, td { word-wrap:break-word; overflow:hidden; text-overflow: ellipsis; }

However, with this I had a problem with column width; all columns have same width and option "bAutoWidth: true" is ignored: enter image description here

For example, there is an empty horizontal space in Price column, or after icons at last column. Moreover word-broken headers (th) seem very ugly, and it would look better if Code, Count, Price and Place columns were at their minimum size (their width matched width of header text).

I would like to specify (somehow) preferred width for each column, or after how many letters it should wrap. I found breakCellText plugin in this post jQuery DataTable overflow and text-wrapping issues. Nevertheless, this plugin is not working with my datatables 1.9.4.

Upvotes: 0

Views: 8145

Answers (1)

Vegeta_77
Vegeta_77

Reputation: 464

I had the same problem. Here is my solution:

.dt-index {
    column-width: auto !important;
}

Please use this style for your table.

I hope that will be your solution.

Greetz Vegeta_77

Upvotes: 2

Related Questions