html 数据表压缩列宽

Question

我正在尝试制作一个 js 数据表，其中包含一个名为 'Audio' 的列，但现在不能很好地利用 space：

我正在尝试更改它，以便音频列仅与其最宽的文本元素一样宽，基本上它没有空白 space:

我试过手动设置最大宽度，但没有任何区别，我也探索了一些数据表选项，但到目前为止没有成功

$(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

如果你可以使用 css 那么试试：

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

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

html 数据表压缩列宽

html datatable compact column width

html

javascript

css

datatable