ширина не применяется для столбцов в таблице семантического пользовательского интерфейса

Question

Я использую Vuetable . и его CSS по умолчанию для таблиц - Semantic UI.

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

Вот как отображается таблица

<div id="table-wrapper" :class="['vuetable-wrapper ui basic segment', loading]">
  <div class="handle">
    <vuetable ref="vuetable"
      api-url="/v1/users"
      :fields="fields"
      pagination-path=""
      data-path="data"
      :per-page="perPage"
      :sort-order="sortOrder"
      :append-params="moreParams"
      @vuetable:pagination-data="onPaginationData"
      @vuetable:initialized="onInitialized"
      @vuetable:loading="showLoader"
      @vuetable:loaded="hideLoader"
    />
  </div>
</div>

Я установил ручку переполнения-х для прокрутки.

.handle[data-v-051ed7b2] {
    overflow-x: scroll;
}

Когда Vuetable get создал CSS по умолчанию, который добавил к нему, был vuetable ui blue selectable unstackable celled table fixed

Есть раздел, где вы можете задать ширину для каждого столбца, я тоже это сделал. Но таблица semanticUI не позволяет применять это, пока я не уберу опцию fixed из vuetable ui blue selectable unstackable celled table fixed ..

теперь имя пользователя отображается полностью. но ширина по-прежнему не применяется.

Как правильно отобразить полную таблицу шириной 100% и получить ширину столбца? а также показать свиток внизу его уже там.

Вы можете проверить этот фрагмент для теста https://codesandbox.io/s/rwlp0446r4