CSS 表格列大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37924104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table column sizing
提问by Killerpixler
In Bootstrap 3, I could apply col-sm-xxto the thtags in the theadand resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4?
在 中Bootstrap 3，我可以随意应用col-sm-xx到表列中的th标签thead并调整其大小。但是，这在引导程序 4 中不起作用。如何在引导程序 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>
Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:
查看 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>
回答by Zim
Updated 2018
2018 年更新
Make sure your table includes the tableclass. This is because Bootstrap 4 tables are "opt-in"so the tableclass must be intentionally added to the table.
确保您的表格包含table课程。这是因为Bootstrap 4 表是“选择加入”的，因此table必须有意将类添加到表中。
http://codeply.com/go/zJLXypKZxL
http://codeply.com/go/zJLXypKZxL
Bootstrap 3.x also had some CSS to reset the table cells so that they don't float..
Bootstrap 3.x 也有一些 CSS 来重置表格单元格，以便它们不会浮动。
table td[class*=col-], table th[class*=col-] {
position: static;
display: table-cell;
float: none;
}
I don't know why this isn't is Bootstrap 4 alpha, but it may be added back in the final release. Adding this CSS will help all columns to use the widths set in the thead..
我不知道为什么这不是 Bootstrap 4 alpha，但它可能会在最终版本中添加回来。添加此 CSS 将帮助所有列使用thead..
UPDATE (as of Bootstrap 4.0.0)
更新（自 Bootstrap 4.0.0 起）
Now that Bootstrap 4 is flexbox, the table cells will not assume the correct width when adding col-*. A workaround is to use the d-inline-blockclass on the table cells to prevent the default display:flex of columns.
现在 Bootstrap 4 是 flexbox，表格单元格在添加col-*. 解决方法是d-inline-block在表格单元格上使用类来防止列的默认 display:flex。
Another option in BS4 is to use the sizing utils classes for width...
BS4 中的另一个选项是使用 sizing utils 类来确定宽度...
<thead>
<tr>
<th class="w-25">25</th>
<th class="w-50">50</th>
<th class="w-25">25</th>
</tr>
</thead>
Lastly, you could use d-flexon the table rows (tr), and the col-*grid classes on the columns (th,td)...
最后，您可以d-flex在表格行 (tr) 和col-*列 (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>
Note: Changing the TR to display:flex can alter the borders
注意：将 TR 更改为 display:flex可以改变边框
回答by Jacob van Lingen
Another option is to apply flex styling at the table row, and add the col-classesto the table header / table data elements:
另一种选择是在表格行应用 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>
回答by madamission
I hacked this out for release Bootstrap 4.1.1 per my needs before I saw @florian_korner's post. Looks very similar.
在我看到@florian_korner 的帖子之前，我根据自己的需要破解了这个以发布 Bootstrap 4.1.1。看起来非常相似。
If you use sass you can paste this snippet at the end of your bootstrap includes. It seems to fix the issue for chrome, IE, and edge. Does not seem to break anything in firefox.
如果您使用 sass，您可以将此代码段粘贴到引导程序包含的末尾。它似乎解决了 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);
}
}
}
or if you just want the compiled css utility:
或者，如果您只想要编译的 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%; }
回答by Eve
Using d-flexclass works well but some other attributes don't work anymore like vertical-align: middleproperty.
使用d-flexclass 效果很好，但其他一些属性不再像vertical-align: middleproperty那样工作。
The best way I found to size columns very easily is to use the widthattribute with percentage only in theadcells.
我发现调整列大小的最佳方法是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>
回答by Abdalla Arbab
Disclaimer: This answer may be a bit old. Since the bootstrap 4 beta. Bootstrap has changed since then.
免责声明：这个答案可能有点旧。自引导程序 4 测试版以来。自那以后，Bootstrap 发生了变化。
The table column size class has been changed from this
表列大小类已从此更改
<th class="col-sm-3">3 columns wide</th>
to
到
<th class="col-3">3 columns wide</th>
回答by jorge santos
I can resolve this problem using the following code using Bootstrap 4:
我可以使用 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>
回答by Florian K?rner
As of Alpha 6 you can create the following sass file:
从 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;
}
}
}
}
}
