bootstrap中表格大小设置,bootstrap 4表格列大小

In bootstrap 3 I could apply col-sm-xx to the th tags in the thead and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4?

3 columns wide5 columns wide4 columns wide

Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:

3 columns wide5 columns wide4 columns wide

123456789

解决方案

Updated 2018

Make sure your table includes the table class. This is because Bootstrap 4 tables are "opt-in" so the table class must be intentionally added to the table.

Bootstrap 3.x also had some CSS to reset the table cells so that they don't float..

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

UPDATE (as of 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-block class on the table cells to prevent the default display:flex of columns.

Another option in BS4 is to use the sizing utils classes for width...

255025

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

25%25%50%

......