Reputation: 1502
I'm using this template from Creative-Tim.com.
Here is a link to the file: drive.google.com/open?id=1EPLpOmM9bNj2-HH-v9rF6HvSoNtTqJtQ
The file is: BS3/examples/new_table.html.
I'm using datatables table and when the browswer window width is descrease, the column headers become responsive where longest table header names appear on top of the sorting arrow, which causes them to look staggered and crooked as not all of them do this because the header names are of different length. How can I keep them all static? I currently have the table set to responsive = false
, and have a scrollX bar.
var table = $('#datatables').DataTable({
"scrollX": true,
orderCellsTop: true,
fixedHeader: true,
"pageLength": 10,
responsive: false,
sDom: 'lrtip'
});
I just want there to be a decent space between columns and for them to stay that way and use scroll for when the page narrows.
Upvotes: 4
Views: 3151
Reputation: 6834
I would not suggest fixed columns unless you have very certain criteria but what you are trying to is something like below:
Note that I added fixedColumns propertyand columnDefs property at the end of your dt settings.. Something like below should work:
var table = $('#datatables').DataTable({
"scrollX": true,
orderCellsTop: true,
fixedHeader: true,
"pageLength": 10,
responsive: false,
sDom: 'lrtip',
columnDefs: [
{ width: 200, targets: 0 }, // add your column indexes for each specification
{ width: 150, targets: 1 },
{ width: 250, targets: 2 } // etc...
],
fixedColumns: true,
scrollY: "300px" // some certain scroll size if you need..
});
And if that does not work, also try updating your css like below:
table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // ***********add this
word-wrap:break-word; // ***********and this
}
Upvotes: 0
Reputation: 10922
Using position: absolute;
is generally a bad idea in Datatables and any other plugin that resizes content automatically as it'll prevent them from being fully responsive, it might fix one issue but generates another.
The cleanest way would be to have a white-space: nowrap;
. If it makes your headers too close to each other, just add a clean margin after each cell :
table.dataTable thead th, table.dataTable thead td {
white-space: nowrap;
}
table.dataTable thead th::after,
table.dataTable thead td::after,
table.dataTable tfoot th::after, /* Don't also forget to give your footer the margin, to keep the header/footer properly aligned */
table.dataTable tfoot td::after {
margin-right: 7px!important;
}
Note that this way you wouldn't disrupt the table's original layout by fixing values, this keeping Datatables free to resize the headers as it pleases afterwards. What's more important than just making it work, is making it work the cleaner way possible.
Otherwise, another extreme solution, that I once used in one of my projects, is to remove the sort icon definitively while still keeping the header sort, as when you have large header names it seems more convenient and most clients feel that it's already natural to click on the header to sort
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
content: '';
}
Upvotes: 0
Reputation: 391
After looking at the template I can give you two hints:
:after
don't fit. For a quick and dirty fix, and if you would like to keep everything else unchanged - consider change the font to something standard I guess.
Upvotes: 0
Reputation: 2644
If I understood your question correctly, then adding the following CSS will do the trick for you:
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
position: absolute;
display: block;
bottom: 8px;
right: 8px;
font-family: 'FontAwesome';
opacity: 0.8;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
padding-right: 30px !important;
}
table.dataTable thead .sorting.text-right,
table.dataTable thead .sorting_asc.text-right,
table.dataTable thead .sorting_desc.text-right,
table.dataTable thead .sorting_asc_disabled.text-right,
table.dataTable thead .sorting_desc_disabled.text-right {
padding-right: 0 !important;
}
Result:
Upvotes: 3