DataTables, Cleaner and Dynamic Column Headers

Question

I am using the data table that has filtering and search but find the headers so dirty. I know that its because the value of the column for example. Blood Type is C, C is only one letter thus the apperance of the header of the column becomes distorted.

1. How do I prioritize header name over value of its column when it comes to resizing of the header width? Please see the table shot below.

2. How do I remove the sorting button(up and down arrows). or how do I change it? I still want the sorting but the diamon thing is so unclean to look at.

Answer 1

(1) To prevent word wrapping in the heading, replace the spaces with non-breaking spaces . You can use the following HTML code:   .

Logged (Last 4)

(2) To hide the triangles (which are background images), you can use the following CSS selectors, following your table definition.:

$(document).ready(function() {

  var table = $('#yourtableidhere').DataTable( {
    // your table definition here
  } );

  // as well as hiding the triangles, you may also
  // want to set the cursor behavior, for consistency: 
  $("th.sorting, th.sorting_asc, th.sorting_desc").css({
    'background-image': 'none',
    'cursor': 'default'
  });

} );

(It may be confusing to some users, if they can no longer see these triangles.)