【问题标题】：Making a Bootstrap table column fit to content使 Bootstrap 表列适合内容
【发布时间】：2022-03-18 04:06:34
【问题描述】：

我正在使用 Bootstrap，并绘制了一张表格。最右边的列中有一个按钮，我希望它下拉到适合所述按钮所需的最小尺寸。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-responsive">
        <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>

呈现如下：

通过一些萤火虫高亮显示，列宽变宽了：

该列随页面缩放，而页面处于较大的动态宽度模式。我知道如何在纯 CSS 中解决这个问题，但其中大多数方法可能会导致网站的低宽度版本出现问题。

如何使该列下拉到其内容的宽度？

（一如既往 - 现有的引导类 > 纯 CSS > Javascript）

【问题讨论】：

发布了这个，我刚刚有了一个想法——如果我正好对齐那一列，我想这差不多——如果其他列中有足够的数据需要空间，他们无论如何都会把它抓回来。编辑：Doh - 这在我有不止一列需要下降到最小尺寸的情况下不起作用。
布局确实如此，但表格绝对适合表格数据。
您应该使用 div 而不是表格。然后，您可以为其宽度分配百分比值以匹配页面宽度。
表格不应用于结构。您可以将表格用于通常进入表格的数据。 Octopoid 不使用 table 标签作为结构，它被用来显示数据。是table标签的正确使用。

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

Gah - 我将它放在 td 规则中，然后将其应用到 th - 非常有效，谢谢。 :) （希望你不介意，我也将 th 规则添加到你的答案中）
为什么不宽度：1%；？

【解决方案2】：

在 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 tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}

文字

这是scss 使用的那个。

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

【讨论】：

这是唯一适用于 bs4 的解决方案。非常感谢！

【解决方案3】：

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

【讨论】：

这个在 Firefox 中为我工作，它是一个真正的 Boostrap 解决方案。
这是最好的解决方案
但是 OP 需要只有最右边的列具有自动宽度，而不是所有列...

【解决方案4】：

有点老问题，但我来这里是为了寻找这个。我希望桌子尽可能小，以适应它的内容。解决方案是简单地将表格宽度设置为任意小的数字（例如 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/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>

【讨论】：

问题是只引用表格的某些列，而不是表格的所有列
是的，但是需要找到解决我的问题的方法，我到了这里。我在回答中解释了这一点。
对这个问题仍然是一个不恰当和不正确的答案。
我为您的样本制作了调整后的 Bootstrap 4 sn-p（需要 !important）

【解决方案5】：

这个解决方案不是每次都好。但我只有两列，我希望第二列占据所有剩余空间。这对我有用

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

【讨论】：

【解决方案6】：

您可以像这样将表格包裹在 div 标签周围，因为它也对我有帮助。

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

<table>
</table>

</div>

【讨论】：

【解决方案7】：

<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>

【讨论】：

这实际上与接受的答案相同，只是作为style= 属性注入 - 并不是说这不是一个有效的答案，而是为访问此内容的其他人指出这一点。

【解决方案8】：

提供的答案都不适合我。如果有人偶然发现这个问题，这里有一个干净的解决方案，它也适用于 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 元素。

【讨论】：

【解决方案9】：

<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>

【讨论】：

嘿，欢迎来到这个地方！留下答案时，请确保不仅留下一段代码。解释代码的作用也很重要。
如果您将我的代码与提供的代码进行比较，您会发现差异。我的回答并不孤单，没有解释。所以不要忽略它。
这无法解决问题 - 使最右边的列宽与按钮宽度一样小。