Bootstrap4: таблица, использующая всю ширину, но все еще использующая таблицу

Question

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

Пример : (последний столбец без содержимого будет использовать оставшееся пространство справа)

Answer 1

Если вы добавите класс table-responsive в свою таблицу, он будет занимать 100% ширины своего родителя и будет одинаково расставлять столбцы ... это показано в таблице top во фрагменте коданиже

Но мы можем сделать то, что вы ищете:

• хотите, чтобы все столбцы использовали минимальную ширину
• последний пустой столбец занимал оставшуюся ширину.
• проверьте таблицу bottom во фрагменте кода ниже

th {
  background: lightgray
}

.myTableOne td {
  white-space: nowrap
}

.myTableOne th:last-of-type {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <h4>Table with table-responsive class</h4> <br/>
  <div class="table-responsive">
    <table class="table  table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<hr/>

<h4>Table for your requirements </h4>
<br/>

<div class="myTableOne">
  <table class=" table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td></td>

      </tr>
    </tbody>
  </table>
</div>