Question

我正在使用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>

这样呈现：

Table Example

随着一些萤火虫突出显示，列宽已经出现了这么宽：

Column Width

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

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

（与以往一样 - 现有的bootstrap类＆gt;纯CSS＆gt; Javascript）

Answer 1

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

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

Answer 2

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

.table-fit {
    width: 1px;
}

并像这样使用它：

<table class="table table-fit">

示例：JSFiddle

Answer 3

向 table 元素添加 w-auto 本机引导4 class ，您的表将适合其内容。

Answer 4

所有解决方案都不适合我。最后td列仍采用完整宽度。所以这是解决方案的工作原理。 在Bootstrap 4上测试

将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;
}

这是sass使用的那个。

@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;
        }
    }
}

Answer 5

你可以把你的桌子包裹在div标签周围，就像它帮助我一样。

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

<table>
</table>

</div>

Answer 6

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

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

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

Answer 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 元素。

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

使Bootstrap表列适合内容

9 个答案: