html datatable compact column width

Question

I am trying to make a js datatable that has a column called 'Audio', which right now does not utilize space very well:

I'm trying to change it so that the Audio column is only as wide as its widest text element, basically so it has no blank space:

I've tried manually setting the max-width but it hasn't made any difference, and I've explored some datatables options but with no luck so far

https://jsfiddle.net/1mzqf23w/

 $(document).ready(function() { var data = JSON.parse('[{"itemId":1,"audio":"01 Hey DJ.flac","format":"flac","length":"00:03:27","audioFilepath":"C:\Users\marti\Documents\ous supreme team - (1986) rappin\Hey DJ.flac","trackNum":1,"album":"Rappin","year":1986,"artist":"Worlds Famous Supreme Team"}, {"itemId":2,"audio":"02 Wow Dude DJ.flac","format":"flac","length":"00:03:27","audioFilepath":"C:\Users\marti\Documents\ous supreme team - (1986) rappin\Hey DJ.flac","trackNum":1,"album":"Rappin","year":1986,"artist":"Worlds Famous Supreme Team"}]') //setup table var reorder = false; var searched = false; var origIndexes = []; var origSeq = []; var origNim = []; let tableId = `#1_table`; //create table var table = $(tableId).DataTable({ "autoWidth": true, "pageLength": 5000, select: { style: 'multi', selector: 'td:nth-child(2)' }, columns: [ { "data": "sequence" }, { "data": "#" }, { "data": "selectAll" }, { "data": "audio" }, { "data": "length" }, { "data": "audioFilepath" }, { "data": "trackNum" }, { "data": "album" }, { "data": "year" }, { "data": "artist" }, //{ "data": "imgSelection" }, ], columnDefs: [ { //invisible sequence num searchable: false, orderable: false, visible: false, targets: 0, }, { //visible sequence num searchable: false, orderable: false, targets: 1, }, {//select all checkbox "className": 'selectall-checkbox', "className": "text-center", searchable: false, orderable: false, targets: 2, }, {//audio filename targets: 3, type: "natural" }, /* {//audio format targets: 4, type: "string" }, */ { //audio file length targets: 4, type: "string" }, /* { //video output format targets: 6, type: "string", orderable: false }, */ {//audioFilepath targets: 5, visible: false, }, {//trackNum targets: 6, visible: true, orderable: true, }, {//album targets: 7, visible: true, orderable: true, }, {//year targets: 8, visible: true, orderable: true, }, {//artist targets: 9, visible: true, orderable: true, }, /* { //image selection targets: 7, type: "string", orderable: false, className: 'text-left' }, */ ], "language": { "emptyTable": "No files in this upload" }, dom: 'rt', rowReorder: { dataSrc: 'sequence', }, }); //add dataset to table var count = 1; data.forEach(function (i) { table.row.add({ "sequence": i.itemId, "#": `<div style='cursor: pointer;'><i class="fa fa-bars"></i> ${count}</div>`, "selectAll": '<input type="checkbox">', "audio": i.audio, "length": i.length, //"outputFormat": i.vidFormatSelection, //"outputLocation": "temp output location", "audioFilepath": i.audioFilepath, "trackNum": i.trackNum, "album": i.album, "year": i.year, "artist": i.artist, //"imgSelection": i.imgSelection, }).node().id = 'rowBrowseId' + i.sampleItemId; count++; }); //draw table table.draw(); } );

Answer 1

If you are able to use css then try:

{//audio filename 
  targets: 3,
  type: "natural",
  className: 'track-name'
},

.track-name {
  width: 0 !important;
  white-space: nowrap;
}