Question

是否有可能使用表响应型，即仅基于列中数据的长度使用最小列宽，并使thead使用所有画布宽度。

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

Answer 1

如果将table-responsive类添加到表中，它将占据其父级宽度的100％，并且将各列平均隔开...这在 top 表中显示下面的代码段

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

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

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>

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

1 个答案: