css - Bootstrap 4 : Table using the whole width but still using table-responsive

Question

是否可以使用仅基于列中数据的长度使用最小列宽的表格响应式，并且还让 thead 使用所有 Canvas 宽度。

示例:(没有内容的最后一列将使用右侧的剩余空间)

Answer 1

如果您将table-responsive 类添加到您的表格中，它将占据其父级宽度的 100% 并将列均匀分布...这显示在顶部 下面代码段中的表格

但我们可以满足您的需求:

• 希望所有列都使用最小宽度
• 占据剩余宽度的最后一个空列。
• 检查下面代码段中的底部表格

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>