表列大小调整 - 开卷题库

小开

最佳答案

2018年更新

确保表中包含 table类。这是因为 Bootstrap 4表是“可选的”，所以必须有意地将 table类添加到表中。

Bootstrap 3.x 还有一些 CSS 来重置表单元格，使它们不会浮动。

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

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

引导程序4A2演示

UPDATE (as of Bootstrap 4.0.0)

现在 Bootstrap 4是柔性方块，当添加 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>

引导程序4A6演示

Lastly, you could use d-flex on the table rows (tr), and the col-* grid classes on the columns (th,td)...

<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(稳定)演示

Note: Changing the TR to display:flex 可以改变边界

小开

免责声明: 这个答案可能有点老。自从 Bootstrap 4测试版以来。 Bootstrap 已经改变了。

表列大小类已从此更改

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

到

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

小开

另一种选择是在表行应用 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>

小开

As of Alpha 6 you can create the following sass file:

@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 _ korner 的帖子之前，我根据自己的需要发布了 Bootstrap 4.1.1，看起来非常相似。

如果使用 sass，可以将此代码片段粘贴到引导程序包括的末尾。它似乎解决了问题的铬，IE，和边缘。似乎没有破坏任何东西在火狐。

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

or if you just want the compiled css utility:

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

小开

I can resolve this problem using the following code using 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>

小开

使用 d-flex类工作得很好，但是其他一些属性不再像 vertical-align: middle属性那样工作。

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

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