Проблема настройки ширины ячейки в таблице начальной загрузки

Question

У меня следующая проблема с моей таблицей начальной загрузки. Я не могу установить произвольную ширину для ячеек в заголовке таблицы. Даже если я это сделаю, это не установлено. Я искал и узнал, что начальная загрузка действительно предотвращает это, добавляя отступы к ячейкам. Но это все равно не сработало, когда я добавил отступ: 0 к каждой ячейке в заголовке таблицы. В любом случае позвольте мне показать код и скриншоты

<div class="col-md-12 col-sm-12 col-xs-12">
  <div class="table-responsive">
    <table class="table table-hover table-white">
      <thead>
        <tr>
          <th style="max-width: 1%;">#</th>
          <th style="max-width: 48.5%;">Component</th>
          <th style="max-width: 2.5%;">Unit Cost</th>
          <th style="max-width: 2.5%;">Qty</th>
          <th style="max-width: 2.5%;">Currency</th>
          <th style="max-width: 13%;">WBS</th>
          <th style="max-width: 14%;">Purchase Type</th>
          <th style="max-width: 10%;">Vendor</th>
          <th style="max-width: 2%;"></th>
          <th style="max-width: 2%;"></th>
          <th style="max-width: 2%;"></th>
        </tr>
      </thead>
    </table>
  </div>
</div>

Это выглядит так, как вы видите, ширина не применяется

Однако это должно выглядеть без полосы прокрутки.

Так что мои вопросы

1. Как я могу применить фиксированную ширину к этим ячейкам?
2. Как сделать так, чтобы таблица выглядела на 100% без этой полосы прокрутки. Как-то сжимая это

Спасибо, заранее. Если что-то еще нужно поделиться, дайте мне знать, пожалуйста.

Answer 1

Вам нужно отключить заполнение для всех ячеек, а не только в заголовке.

Если вы не хотите, чтобы больший контент увеличивал ширину столбца, вы должны скрыть переполнение.

.table-responsive td,
.table-responsive th {
    padding: 0 !important;
    overflow: hidden;
}

Если вы хотите изменить размер таблицы, чтобы она всегда помещалась на экране, вам понадобится немного JavaScript.

(function() {
  const responsiveTable = document.querySelector('.responsive-table table');
  responsiveTable.style.transformOrigin = '0 0';


  function resizeTable() {
    responsiveTable.style.transform = 'scale(1)';
    const tableWidth = responsiveTable.getBoundingClientRect().width;
    const resizeFactor = document.body.offsetWidth / tableWidth;
    responsiveTable.style.transform = `scale(${resizeFactor})`;
  }
  resizeTable();

  window.addEventListener('resize', resizeTable);
})();

.responsive-table table {
  background-color: red;
}

.responsive-table td,
.responsive-table th {
  background-color: orange;
}

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th style="width: 5%">Column 1</th>
        <th style="width: 5%">Column 2</th>
        <th style="width: 5%">Column 3</th>
        <th style="width: 5%">Column 4</th>
        <th style="width: 5%">Column 5</th>
        <th style="width: 5%">Column 6</th>
        <th style="width: 5%">Column 7</th>
        <th style="width: 5%">Column 8</th>
        <th style="width: 5%">Column 9</th>
        <th style="width: 5%">Column 10</th>
        <th style="width: 5%">Column 11</th>
        <th style="width: 5%">Column 12</th>
        <th style="width: 5%">Column 13</th>
        <th style="width: 5%">Column 14</th>
        <th style="width: 5%">Column 15</th>
        <th style="width: 5%">Column 16</th>
        <th style="width: 5%">Column 17</th>
        <th style="width: 5%">Column 18</th>
        <th style="width: 5%">Column 19</th>
        <th style="width: 5%">Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
      <tr>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
        <td>Some Content</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

вы можете код:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

и стиль

.table-responsive {
    display: table;
}