Search code examples
datatables-1.10

jQuery DataTables fixed size for ONE of the columns?

I have a DataTables table where I want it to autosize as default (when resizing window and according to initial content etc.), except for one special column, for which I'd like to have a fixed width.

It seems, if I set a width using columnDefs, the table is initially autosized according to content, but it no longer adapts to a changed window width. Doesn't seem to matter if I specify a % width or a pixel width.

Solution

  • If you want precise control over the table column widths you must use CSS:

    table.dataTable thead th:nth-child(4),
table.dataTable tbody td:nth-child(4) {
  width: 200px;
  max-width: 200px;
  min-width: 200px;
}

    If you inspect the above column you will see the that computed width is larger than 200px. This is the padding kicking in, so you must reset padding-left and padding-right to get exactly 200px.

    If you want to shrink a column to a width beyond "reasonable" you must add som additional CSS :

    table.dataTable {
  table-layout: fixed;
}

    Why this is needed you can read about here -> https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values

    table.dataTable thead th:nth-child(2),
table.dataTable tbody td:nth-child(2) {
  word-break: break-all;
  overflow-wrap: break-word;
  width: 20px;
  max-width: 20px;
  padding-right: 0px;
  padding-left: 0px;
}

    demo -> http://jsfiddle.net/n4j1wgu5/