Question

我正在使用Bootstrap 4.0 alpha（http://v4-alpha.getbootstrap.com/content/tables/）..

我创建了一个包含5列的表，但宽度是自动配置的。我想设置每列的宽度百分比。

我尝试过使用 class =＆＃34; col-xs-3＆＃34;在中，正如stackoverflow中所建议的那样，没有成功。

我发现了一个关于这个问题的帖子。虽然标题说他使用Bootstrap V4 ......他真的使用bootstrap 3.3.7。（How to specify responsive column width for table in Bootstrap v4）

<table class="table table-striped table-hover table-responsive">
    <thead class="thead-inverse">
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th>Amount</th>
      <th>Comments</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let expense of expenses">
      <td>{{expense.datetime | date}}</td>
      <td>{{expense.description}}</td>
      <td>{{expense.amount | currency:'USD':true}}</td>
      <td>{{expense.comment}}</td>
      <td></td>
    </tr>
    </tbody>
  </table>

Answer 1

我从3.3迁移到4，所以可能会有一点乐趣。

必须设置保存表col-xs-12的div容器
tr thead必须设置为row，宽度col-xs-12可能会设置，具体取决于您的需求
表类table-responsive也取决于您的需求

<div class="col-md-12">
  <table class="table table-responsive table-striped table-hover table-sm">
    <thead>
      <tr class="row col-xs-12">
        <th class="col-xs-9">Location</th>
        <th class="col-xs-3">Actions</th>
      </tr>
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</div>

Bootstrap 4.0 alpha - 在表格中设置列宽

1 个答案: