表格列大小调整

Question

表格列大小调整

csstwitter-bootstraphtml-tablebootstrap-4

115

在Bootstrap 4中，不能像在Bootstrap 3中那样将col-sm-xx应用于thead中的th标签以随意调整表格列的大小。我该如何在Bootstrap 4中实现类似的效果？

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

看一下提供的codeply，它无法正确地调整大小，特别是如果你向表格中添加一些数据。看看这个演示：

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

- Killerpixler

1

作为对这个问题的补充：如果您有长内容（例如非常长的 URL）要显示，则使用 Bootstrap 4 表格即使使用下面提供的调整大小答案也不是一个很好的解决方案。使用 flex-row 或 row/col 解决方案往往会在溢出和文本换行方面更有效。 - Killerpixler

7个回答

31

另一个选择是在表格行上应用 flex 样式，并将 col-classes 添加到表头 / 表数据元素中：

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

- Jacob van Lingen

1

可以工作，但是 vertical-align: middle 在使用 d-flex 类时不再起作用。 - Eve

垂直对齐在flexbox布局中确实无法工作。请使用align-items: baseline。要了解更多关于flexbox的信息，请阅读此指南。 - Jacob van Lingen

确切地说，这就是解决方案。谢谢。 - Henry.K

18

使用d-flex类可以很好地工作，但是一些其他属性不再起作用，比如vertical-align:middle属性。

我发现将百分比的width属性仅用于thead单元格是非常容易调整列大小的最佳方法。

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

- Eve

5

注意：在 HTML5 中，使用 <th> 的 width 属性现已不被支持。 - StefanJM

11

在发布Bootstrap 4.1.1之前，我根据自己的需要编写了这个补丁，直到看到@florian_korner的文章才发现它们非常相似。

如果你使用的是sass，你可以将这个代码片段粘贴到你的bootstrap包含文件的末尾。它似乎可以修复chrome、IE和edge的问题，在firefox中不会出现问题。

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

或者，如果您只想要已编译的CSS实用程序：

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }

- Michael Adamission

7

免责声明：本回答可能有点过时。自Bootstrap 4 beta以来，Bootstrap已经发生了变化。

表格列大小类已从以下内容更改：

<th class="col-sm-3">3 columns wide</th>

to

<th class="col-3">3 columns wide</th>

- Abdalla Arbab

这似乎无法设置列宽：http://www.codeply.com/go/Utyon2XEB6 - Carol Skelly

请查看此链接：https://dev59.com/ClgR5IYBdhLWcg3wDJxN - Abdalla Arbab

1

另一个问题与此无关。由于我的回答中所述的 BS4 alpha 6 弹性盒子，表格单元格的列宽不起作用。 - Carol Skelly

6

我可以使用以下Bootstrap 4代码解决这个问题：

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

- Jorge Santos

1

从 Alpha 6 开始，您可以创建以下 Sass 文件：

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}

- Florian Körner

这段代码根本不起作用 - 我试图调试了1.5个小时，但是我的Sass知识太弱了，无法解决。下次请发布可工作的示例。 - Slowwie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

2018年更新

确保您的表格包含table类。这是因为Bootstrap 4表格是"选择加入"，所以必须有意地将table类添加到表格中。

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x还有一些CSS用于重置表格单元格，以防止它们浮动。

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

我不知道为什么这个在 Bootstrap 4 alpha 中没有了，但它可能会在最终版中被加回来。添加这个 CSS 将帮助所有的列使用在 thead 中设置的宽度。

Bootstrap 4 Alpha 2 演示

更新（截至 Bootstrap 4.0.0）

现在 Bootstrap 4 是 flexbox，当添加 col-* 时表格单元格将无法假定正确的宽度。一个解决方法是在表格单元格上使用 d-inline-block 类来防止默认的列显示：flex。

BS4 中的另一个选项是使用宽度的尺寸工具类……

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Bootstrap 4 Alpha 6演示

最后，您可以在表格行（tr）上使用 d-flex，并且在列（th、td）上使用col-*网格类...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Bootstrap 4.0.0（稳定版）演示

注意：将TR更改为display:flex 可能会改变边框效果