Unable to assign width or max width on fixedColumns

frustrated

I am sorry jsfiddle is being stupid at the moment and not letting me save/fork.

I am using latest datatables and fixedColumns extension.

Essentially, all my widths are being ignored, both in CSS and the columnDefs the Long row should be max-width'd at something much shorter than it is. I would expect the row height to increase as more content is overflowing the width and wrapping below, but this is not the case and in fact the row height is applied via datatables as a direct style on the tr element. I want the content to expand vertically once the max-width is reached.

<table id="big-table">
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Short</td>
      <td>LOOOOOOOOOOOOOOO OOOOOOOOOOOOOOO OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO OOOOOOOO OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO OOOOOOOOOOOOOOOOOO OOOOOOOOO OOOOOOOOOOOOOOOOOONG</td>
    </tr>
    <tr>
      <td>Short</td>
      <td>Short</td>
    </tr>
  </tbody>
</table>

#big-table th:last-child,
#big-table td:last-child {
  width: 20px;
  max-width: 20px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

$("#big-table").DataTable({
    scrollX: true,
  scrollY: '75vh',
    fixedColumns: {
    leftColumns: 1,
  },
    columnDefs: [
    { targets: [-1], width: '50px' },
    { targets: [-1], 'max-width': '50px' },
  ]
});

colin

Hi @frustrated ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin