使Bootstrap表列适合内容

w8biq8rn  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(9)|浏览(154)

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

这将呈现如下所示:

通过一些firebug突出显示,列宽如下:

当页面处于较大的动态宽度模式时,该列随页面缩放。我有一些想法,我会去解决这个问题在纯CSS,但大多数这些方法可能会导致问题与低宽度版本的网站。
我怎样才能使该列下拉到其内容的宽度?

  • (一如既往-现有的引导类>纯CSS > JavaScript)*
k3bvogb1

k3bvogb11#

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

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

irtuqstp2#

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

yhuiod9q

yhuiod9q3#

更新

  • 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;
        }
    }
}
cclgggtu

cclgggtu4#

这是个老问题了,但我来这里就是为了找这个。我希望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>
camsedfj

camsedfj5#

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

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

8i9zcol26#

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

yrdbyhpb7#

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

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

<table>
</table>

</div>
waxmsbnn

waxmsbnn8#

没有一个提供的答案对我有用。如果有人遇到这个问题,这里有一个干净的解决方案,也适用于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元素上。

vwoqyblh

vwoqyblh9#

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

相关问题