fixed table width

walter07

I have a table in a card container 1200 x 750 px. but my table is much bigger than this. I tried to fix this with scrollX:true but for some reason it still show the full table outside my card container. This is my js. What am I missing ?

`    myTable = $('#example').DataTable({
"sPaginationType": "full_numbers",
data: dataSet,        // data from above
columns: columnDefs,  // columns from above
dom: 'Bfrtip',        // element order: NEEDS BUTTON CONTAINER (B) ****

select: 'single',     // enable single row selection
responsive: false,     // enable responsiveness
altEditor: true,        // Enable altEditor ****
  scroller: true,
  scrollCollapse: true,
  scrollX: true,
  scrollY: 600,
buttons: [{
  text: 'Add',
  name: 'add'        // DO NOT change name
},
{
  extend: 'selected', // Bind to Selected row
  text: 'Edit',
  name: 'edit'        // DO NOT change name
},
{
  text: 'copy',
  name: 'copy'        // DO NOT change name
},
{
  text: 'excel',
  name: 'excel'        // DO NOT change name
},
{
  text: 'pdf',
  name: 'pdf'        // DO NOT change name
}]
  });`

Thx in advance