I am currently facing an issue with my datatable where I need it to have a specific width while also displaying all its columns. The problem I am encountering can be summarized as follows:
I came across solutions like Datatables Width Overflow For A Lot Of Columns and JQuery Datatables overflow, but I would rather opt for word breaking instead of having a scrollbar in my table.
After some research, I found another workaround from jQuery DataTable overflow and text-wrapping issues which required me to set the following:
table.display { table-layout:fixed; }
th, td { word-wrap:break-word; overflow:hidden; text-overflow: ellipsis; }
However, this solution brought about a new problem with column width; all columns ended up having the same width and the option "bAutoWidth: true" was being ignored:
For instance, there was empty horizontal space in the Price column, or after icons in the last column. Additionally, the word-broken headers (th) did not look aesthetically pleasing, and it would be more visually appealing if the Code, Count, Price, and Place columns were at their minimum size (with their widths matching the header text).
I am looking for a way to specify preferred width for each column, or determine after how many characters it should wrap. Though I discovered the breakCellText plugin mentioned in the post about jQuery DataTable overflow and text-wrapping issues, unfortunately, this plugin does not seem to be compatible with my datatables version 1.9.4.