创建一个使表格单元格宽度适合内容的类

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

将w-autonative bootstrap 4class添加到table元素，您的表将适合其内容。

更新

• 2023年8月：更新了scss代码

在Bootstrap 4.5和5.0上测试

没有一个解决方案对我有用。td最后一列仍然采用全宽。这就是解决方案。

CSS

将table-fit添加到table

table.table-fit {
  width: auto !important;
  table-layout: auto !important;
}
table.table-fit thead th,
table.table-fit tbody td,
table.table-fit tfoot th,
table.table-fit tfoot td {
  width: auto !important;
}

Scss

下面是scss的用法。

@mixin width {
    width: auto !important;
}
table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th,
        tbody td,
        tfoot th,
        tfoot td  {
            @include width;
        }
    }
}

这是个老问题了，但我来这里就是为了找这个。我希望table尽可能小，以适应它的内容。解决方案是简单地将表宽设置为任意小的数字（例如1px）。我甚至创建了一个CSS类来处理它：

.table-fit {
    width: 1px;
}

然后这样使用：

<table class="table table-fit">

示例：JSFiddle
调整CSS的Bootstrap 4示例

.table-fit {
  width: 1px!important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<h3>Regular Table</h3>

<table class="table table-bordered">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
</table>

<h3>Compact Table</h3>

<table class="table table-bordered table-fit">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
</table>

这个解决方案并不是每次都好。但我只有两列，我想第二列采取所有剩余的空间。这对我很有效

<tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>

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

<h5>Left</h5>
<table class="table table-responsive">
    <tbody>
        <tr>
            <th>Action</th>        
            <th>Name</th>
            <th>Payment Method</th>
        </tr>
        <tr>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>        
            <td>Bart Foo</td>
            <td>Visa</td>
        </tr>
    </tbody>
</table>

<h5>Right</h5>

<table class="table table-responsive">
    <tbody>
        <tr>                    
            <th>Name</th>
            <th>Payment Method</th>
            <th>Action</th>            
        </tr>
        <tr>

            <td>Bart Foo</td>
            <td>Visa</td>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>            
        </tr>
    </tbody>
</table>

你可以像这样把你的表 Package 在div标签周围，因为它也帮助了我。

<div class="col-md-3">

<table>
</table>

</div>

没有一个提供的答案对我有用。如果有人遇到这个问题，这里有一个干净的解决方案，也适用于Boostrap 4.6。
通过使用colgroup，我们可以调整整个列的宽度。因此，我们将希望适合内容的列的宽度设置为1%。只需确保为列添加适当数量的col元素：

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

<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered">
      <colgroup>
        <col>
        <col>
        <col style="width: 1%;">
      </colgroup>
      <thead>
        <tr>
          <th>Name</th>
          <th>Payment Method</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bart Foo</td>
          <td>Visa</td>
          <td><a role="button" class="btn btn-primary btn-xs" href="">View</a></td>
        </tr>
      </tbody>
    </table>
  </div> 
</div>

（为表格添加了边框，以便更好地显示结果）
如果你不喜欢内联样式，你可以把它移到一个CSS类中，然后应用到col元素上。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="table-responsive">
  <table class="table">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Payment Method</th>
        <th></th>
      </tr>
      <tr>
        <td>Bart Foo</td>
        <td>Visa</td>
        <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>
      </tr>
    </tbody>
  </table>
</div>