如何使用colspan属性让HTML表格合计行单元格靠右显示

问题原因 #

• CSS类名不匹配：HTML中table声明的类是travaux，但CSS写的是.techniques，样式未生效
• 合计行结构缺失：表格共6列，当前合计行仅1个跨3列的单元格，默认从左侧开始排列，因此显示在左边

调整方案 #

1. 统一CSS选择器的类名和HTML一致
2. 在合计行的合计单元格前补充3个空<td>占位，让合计单元格占据右侧3列
3. 可给合计单元格添加右对齐样式，符合常规排版习惯

修改后代码 #

HTML代码

<table class="travaux">
  <tr>
    <th>Nature de l’opération</th>
    <th>Unité</th>
    <th>Quantité</th>
    <th>P.U (dh)</th>
    <th>Coût (dh)</th>
    <th>N.J.T</th>
  </tr> 
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="3">Coût total     :   </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="3">TVA (20%) :    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="3">T.T.C            :   </td>
  </tr>
</table>

CSS代码

.travaux{
  width: 70%;
}
.travaux,.travaux th, .travaux td{
  border: 1px solid;
  border-collapse: collapse;
}
.travaux td{
  border-top: hidden;
  text-align: center;
  padding: 6px;
}
/* 合计单元格右对齐样式，可按需调整 */
.travaux td[colspan="3"]{
  text-align: right;
  padding-right: 10px;
}

内容的提问来源于stack exchange，提问作者TAHER El Mehdi