Bootstrap4：表格使用整个宽度，但仍使用表格响应答案

【问题标题】：Bootstrap4: Table using the whole width but still using table-responsiveBootstrap4：表格使用整个宽度，但仍使用表格响应
【发布时间】：2019-10-26 09:05:35
【问题描述】：

是否可以使用基于列中数据长度的最小列宽以及使用所有画布宽度的thead 的表格响应。

示例：（最后一列没有内容将使用右侧剩余空间）

【问题讨论】：

您可以通过overflow-x: scroll 使表格响应，无需为此考虑太多

标签： css html-table bootstrap-4

【解决方案1】：

如果您将table-responsive 类添加到您的表中，它将占据其父级宽度的 100% 并且将列等间距...这显示在代码中的 top 表中下面是sn-p

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

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

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>

【讨论】：