Bootstrap表格行未占满全宽仅横跨4列问题求助

问题原因 #

• 表体每行的单元格数量与表头列数不匹配：表头定义了8列，但表体每行仅包含1个<th>行头 + 3个<td>普通单元格，合计4个单元格，自然只能占满4列宽度。
• CEX列的表头标签属性存在语法错误：代码中<th scope="col&quot;&gt;CEX</th>的属性引号转义错误，会导致HTML解析异常，可能影响表格结构渲染。

解决方案 #

场景1：需要展示8列全部单元格 #

直接给表体每行补全剩余4个<td>即可，修正后完整代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">B2C2</th>
      <th scope="col">Kraken</th>
      <th scope="col">CEX</th>
      <th scope="col">Qredo</th>
      <th scope="col">Gemini</th>
      <th scope="col">Coinbase</th>
      <th scope="col">Galaxy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">BTC</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">ETH</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">ADA</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">DAT</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">TEST</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

场景2：后4列不需要拆分，合并为一个区域展示 #

给表体每行最后一个<td>添加colspan="4"属性，让它自动占满剩余4列宽度，单行李代码示例：

<tr>
  <th scope="row">BTC</th>
  <td></td>
  <td></td>
  <td colspan="4"></td>
</tr>

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