datatable white-space:nowrap for one specific column

Question

I have a bootstrap datatable with alot of data. One row in particular (Product) will always have a large amount of data. Currently the row expands downwards and takes up alot of space

I am trying to get the Product column to expand to the right instead of down, so that the product column title expands to fit the width of the data. The closes I've gotten so far is by adding this css style:

<style> td { white-space: nowrap; } </style>

Which will do the desired column growth, but for each column

Is there a way to have ONLY the product column get better styling to it expands to the right and grows the column width? Maybe even have two lines of text instead of one for a more compact text display.

https://jsfiddle.net/martinradio/yz46nLr8/61/

Answer 1

You can use td:nth-child(9).

td:nth-child(9){
  white-space: nowrap;
}

See the JSFiddle: https://jsfiddle.net/ju4d73po/

Answer 2

For Bootstrap 4 use 'text-nowrap' class

const table = $('#listTable')
  .DataTable({
    columnDefs: [{
      targets: 0,
      className: 'text-nowrap'
    }]
  });