停止将Bootstrap表拉伸到全屏宽度并为单元格添加额外的空间

问题描述

我有一张桌子，可容纳600像素以下的屏幕。当屏幕尺寸大于600px时，表格将增长以填满屏幕，并在每个单元格的右侧为每一列提供很多额外的间距。

如何删除此字符以阻止表增长并删除多余的空间，以便下一列从上一列的最大单元格的末尾开始？

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

</head>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Stat</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Highest Money Reached</th>
      <td>Mark</td>
      <td>otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

代码也位于此JsFiddle

上

解决方法

您正在使用Bootstrap类，并且Bootstrap .table将表的with设置为width:100%;。您可以从表格HTML中删除table类，那样就可以了-但是它也会影响某些样式。

相反，为了防止表格扩展到整个屏幕宽度（除非需要这样做），您只需将以下内容添加到CSS中：

table.table { width:auto; }

只需确保在Bootstrap CSS的之后包含此内容，不要忘记在CSS选择器中包含.table来覆盖Bootstrap类。

工作示例：

table.table { width:auto;}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Stat</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Highest Money Reached</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

bootstrap-4 html