thymeleaf/SpringBoot下Bootstrap表格占满屏幕 如何调整为50-60%宽度

Bootstrap 5 内置的.table类默认配置了width: 100%属性，所以会自动撑满父容器的宽度，通过以下几种方式即可实现50%-60%的宽度控制：

• 方案1：使用Bootstrap内置工具类（无需额外写CSS，推荐）
  如果刚好需要50%宽度，直接给table标签添加w-50类即可，搭配mx-auto类可以实现表格水平居中，示例代码：

<table class="table table-striped table-sm w-50 mx-auto" >
  <!-- 原有表格内容 -->
</table>

如果需要更贴近60%的宽度，推荐用栅格系统包裹表格，中等及以上屏幕下占7/12宽度（约58.3%，符合要求），小屏幕会自动适配为100%宽度，响应式效果更好，示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-7">
      <table class="table table-striped table-sm" >
        <!-- 原有表格内容 -->
      </table>
    </div>
  </div>
</div>

• 方案2：自定义CSS类（灵活适配精确宽度）
  你可以自定义一个宽度类，设置需要的精确宽度，比如设置为60%：
  首先在页面的<head>标签中添加样式：

<style>
.table-width-60 {
  width: 60%;
  /* 可选：设置水平居中 */
  margin: 0 auto;
}
</style>

然后给table标签添加对应类即可：

<table class="table table-striped table-sm table-width-60" >
  <!-- 原有表格内容 -->
</table>

• 方案3：直接添加内联样式（临时调试使用）
  如果是临时调试，也可以直接在table标签上添加style属性设置宽度：

<table class="table table-striped table-sm" style="width: 60%; margin: 0 auto;" >
  <!-- 原有表格内容 -->
</table>

内容的提问来源于stack exchange，提问作者hoosain.madhi