0

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.

1 Answer 1

2

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.