Bootstrap 4.x最新版本中<th>标签的.col-*-*类失效，如何调整表格列宽？

确实，Bootstrap 4 移除了在表格表头<th>标签中直接使用.col-*-*类控制列宽的支持——因为Bootstrap 4的网格类基于Flexbox实现，而表格的布局逻辑和网格系统不兼容，所以原来的写法就失效了。不过别担心，有几种简单的方式可以实现你要的列宽控制：

方法一：自定义CSS类（精准匹配原比例） #

你可以直接给<th>标签添加自定义类，然后通过CSS设置对应的宽度，完美对应原来.col-sm-3、.col-sm-4、.col-sm-5的比例：

首先添加自定义样式：

/* 对应原col-sm-3的25%宽度 */
.table-col-sm-3 { width: 25%; }
/* 对应原col-sm-4的33.3333%宽度 */
.table-col-sm-4 { width: 33.3333%; }
/* 对应原col-sm-5的41.6667%宽度 */
.table-col-sm-5 { width: 41.6667%; }

然后修改你的表格代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<style>
.table-col-sm-3 { width: 25%; }
.table-col-sm-4 { width: 33.3333%; }
.table-col-sm-5 { width: 41.6667%; }
</style>

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

方法二：使用Bootstrap内置宽度工具类 #

Bootstrap 4提供了一系列w-*工具类，可以快速设置宽度，比如w-25（25%）、w-33（约33%）、w-auto（自动分配剩余空间），你可以直接用这些类来调整：

<table class="table">
  <thead>
    <tr>
      <th class="w-25">3 columns wide</th>
      <th class="w-33">4 columns wide</th>
      <th class="w-auto">5 columns wide</th>
    </tr>
  </thead>
</table>

这种方式不需要写额外CSS，适合快速调整，不过如果需要精准的41.6667%宽度，还是方法一更合适。

方法三：实现响应式列宽（模拟原col-sm-*的效果） #

如果需要在不同屏幕尺寸下调整列宽，可以结合媒体查询写自定义CSS，实现和原来.col-sm-*一样的响应式效果：

/* 在屏幕宽度≥576px（sm断点）时应用宽度 */
@media (min-width: 576px) {
  .table-col-sm-3 { width: 25%; }
  .table-col-sm-4 { width: 33.3333%; }
  .table-col-sm-5 { width: 41.6667%; }
}

这样在移动端（屏幕小于576px）时，表格会自动自适应宽度，大于等于576px时就会应用你设置的比例。

内容的提问来源于stack exchange，提问作者aphra