Регулировка заголовков таблицы данных в соответствии с шириной тела

Question

Я пытаюсь настроить ширину заголовка и столбцов, потому что планирую показать таблицу на мобильном устройстве. Столбец определенно стал меньше, используя следующее:

columns: [
  { data: 'provinceState', title: 'State', width: '2px' },
  { data: 'countryRegion', title: 'Country', width: '2px' }
]

МОЙ JS КОД

const getNewCases = async() => {
  const response = await fetch('https://covid19.mathdro.id/api/daily/3-18-2020');
  const data = await response.json();
  let usa = data.filter(val => {
    return val.countryRegion === 'US';
  });
  $('#loadingLabel').hide();
  $('#myTable').DataTable({
    data: usa,
    bLengthChange: false,
    bPaginate: false,
    scrollY:        '50vh',
    columns: [
      { data: 'provinceState', title: 'State', width: '2px' },
      { data: 'countryRegion', title: 'Country', width: '2px' }
    ]
  });
};
getNewCases();

Как вы можете видеть в моем FIDDLE мое тело с данными стало меньше, но заголовки нет. Есть ли правильный способ гарантировать, что оба становятся меньше? Я делаю что-то не так?

К вашему сведению, я также попробовал принятый ответ в этом stackoverflow Посте

Answer 1

Оберните его внутри контейнера div как

<div class='container'>
  <table id="myTable"></table>
  <div id="loadingLabel">Loading...</div>
</div>

И с помощью css вы можете установить ширину контейнера

.container{
   width: 200px;
}