Bootstrap表格设定宽度未生效 青绿色行宽度远超预期原因咨询

• 列数未对齐：你当前表格第一行<tr>包含3个<th>元素，宽度总和为44%+12%+44%=100%，但第二行<tr>仅包含2个<th>元素。HTML表格默认要求同一张表的每行总列数一致，浏览器会自动调整列宽填充缺失的单元格位置，导致你手动设置的宽度完全失效。
• 表格布局模式默认自适应：Bootstrap的.table类默认使用table-layout: auto布局规则，该模式下列宽会优先适配单元格内容长度，你自定义的百分比宽度优先级极低，无法正常生效。
• 百分比宽度计算基准问题：你第二行设置的列宽度总和远低于100%，剩余宽度浏览器会自动分配给现有列，进一步放大了青绿色区块的实际宽度，同时你代码里青绿色列当前设置的是3%而非你预期的5%，也会导致和预期效果有偏差。

1. 给<table>标签添加style="table-layout: fixed"，强制开启表格固定布局，优先应用你自定义的列宽设置。
2. 统一每行的列数，缺失的单元格可以补全，需要跨列的话使用colspan属性明确声明跨列数量。
3. 确保每行所有单元格的宽度总和等于100%，避免浏览器自动分配剩余宽度，按你的需求将青绿色列宽度调整为5%即可。

修正后的代码示例 #

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <br><br>
      <div class="table-responsive" *ngIf="strikes.length > 0">
         <!-- 新增table-layout: fixed 固定布局 -->
         <table class="table table-striped" style="table-layout: fixed">
            <thead>
               <tr>
                  <th scope="col" style="width: 44%; text-align: center;">CALL</th>
                  <th class="exoPrice" scope="col" style="width: 12%;background-color: #dee2e657;">
                  </th>
                  <th scope="col" style="width: 44%; text-align: center">PUT</th>
               </tr>
               <tr>
                  <!-- 青绿色列设置为预期的5%，剩余宽度按需分配，总宽度100% -->
                  <th scope="col" style="width: 5%; background-color: aqua;"></th>
                  <th scope="col" style="width: 51%; background-color: green;">Quantity</th>
                  <th scope="col" style="width: 44%;"></th>
               </tr>
            </thead>
         </table>
      </div>
   </body>
</html>

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