I'm using jQuery DataTables in my .NET web application but how do I set a max width for one specific column, all the other columns should be auto sized (like they are now in my table)
EDIT
The DataTables did it correctly by itself, the problem was there was a very long word without spaces that cause the problem
Your problem seems more CSS related ...
Using word-wrap in CSS would fix that issue, for columnX just add this to your CSS.
.columnX {
word-wrap: break-word;
}
It would wrap even words without spaces based on your set width for the column.
word-wrap: break-word; word-break: break-all; white-space: break-spaces;I agree with the above solution of using the word wrap - it works great. However, I had further issues with columns with large amounts of data in. I also did the following to get it fully working:
I have had numerous issues with the column widths of datatables. The magic fix for me was including the line
table-layout: fixed;
This css goes with the overall css of the table. For example, if you have declared the datatables like the following:
LoadTable = $('#LoadTable').dataTable.....
Then the magic css line would go in the class Loadtable.
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
I am controlling the column width by modifying the contents if too long and displaying the full text in a tooltip.
{
targets: [3],
"render": function (data, type, row, meta) {
return type === 'display' && data.length > 20 ?
'<span title="' + data + '">' + data.substr(0, 18) + '...</span>' : data;
}
},
{
targets: [3],
"render": function (data, type, full, meta) {
return '<span data-toggle="tooltip" title="' + data + '">' + data + '</span>';
}
}
Using the span element, you could control length directly as well.
{
targets: [3],
"render": function (data, type, full, meta) {
return '<span style="display: inline-block; width:200px;">' + data + '</span>';
}
}
It can be easy with use of
'columnDefs': [
{'max-width': '20%', 'targets': 0}
],
Refer this link for more information. (How to set max-width for particular column in jQuery DataTables)!
