Vue模板colspan无法正常工作

Question

您好，我有一个简单的问题。因为某种原因，我的代码没有发现任何问题。似乎我的代码没有读取我的colspan。好像这个问题被标记为重复。但我不想指定表格的宽度，因为我希望表格能够响应并且我使用引导表格

<div>
  <table class="table table-condensed">
      <thead>
        <tr class="text-uppercase text-contrail table-dark-head">
          <th colspan="3">Spillage</th>
          <th>Total</th>
          <th>Remarks</th>
        </tr>
       </thead>
       <tbody>
         <tr>
           <td colspan="3">Material Cost / Kg</td>
           <td>
             <input></input>
           </td>
           <td>
             <input></input>
           </td>
         </tr>
         <tr>
           <td>Spillage at 0.5%</td>
         </tr>
       </tbody>
   </table>
</div>

我将此代码放在模板中。请查看图片以获取结果。总数和备注应在右侧。但最终会达到平衡宽度。