CODEWITHSUNDEEP
datatables
shorif2000
shorif2000

Reputation: 2654

jquery datatables hide sort arrows and remove the padding but keep functionality

I would like to remove the sort arrows with the padding on jquery datatables. I have tried the examples here but it is not exactly what i am after

Sort arrows in datatables to be removed

I tried added the followign which only hides the icons but not the padding

.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

I tried adding $(".sorting").removeClass("sorting"); but this messes up the column widths. When I click on column to sort it adds the padding on and the headers become not aligned with the body

Upvotes: 0

Views: 5942

Answers (2)

Fid
Fid

Reputation: 506

In case you are using table-sm with Bootstrap 4:

.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

table.dataTable.table-sm>thead>tr>th { 
    padding-right: inherit !important; 
}

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58880

For jQuery DataTables 1.10+ with Bootstrap styling, use the following CSS rules:

.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

table.dataTable thead > tr > th.sorting_asc, 
table.dataTable thead > tr > th.sorting_desc, 
table.dataTable thead > tr > th.sorting, 
table.dataTable thead > tr > td.sorting_asc, 
table.dataTable thead > tr > td.sorting_desc, 
table.dataTable thead > tr > td.sorting {
    padding-right: inherit;
}

See this jsFiddle for code and demonstration.

Upvotes: 2

Related Questions