Bootstrap Table - 向右移动单元格以正确显示总数

Question

晚上好，我试图对齐一张桌子，使其像照片一样，但未能这样做，我可以帮忙吗？

现在我有这样的话：

我希望它看起来像这样：

这是我的HTML代码：

＆＃13;

＆＃13;

<table class="table table-hover table-bordered">
   <thead>
     <tr>
       <th class="text-left">Codigo</th>
       <th class="text-left">Descripcion</th>
       <th class="text-left">Precio</th>
       <th class="text-left">Cantidad</th>
       <th class="text-left">Importe</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td class="col-md-1">1001</td>
       <td class="col-md-8">Producto de ejemplo 1</td>
       <td class="col-md-1 text-right">$10,000</td>
       <td class="col-md-1 text-center">100</td>
       <td class="col-md-1 text-right">$1,000,000</td>
     </tr>
     <tr>
       <th class="text-right" scope="row">TOTAL</th>
       <td class="text-right">$1,000,000</td>
     </tr>
   </tbody>
 </table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为摘要行中的单元格指定colspan将使最后一个单元格向右移动。

<th colspan="4" class="text-right" scope="row">TOTAL</th>

或者，您可以使用<td>与colspan="3"开始行，并使用没有边框的class（由您的css控制）。

<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>

如果没有class，可以直接操纵style。

<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>

更新了代码段：

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  font-family: arial;
}

td,
th {
  width: auto;
  margin: 2px;
  padding: 3px;
  text-align: left;
  border: 1px solid grey;
}

.noborders {
  border: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

＆＃13;

<table class="table table-hover table-bordered">
   <thead>
     <tr>
       <th class="text-left">Codigo</th>
       <th class="text-left">Descripcion</th>
       <th class="text-left">Precio</th>
       <th class="text-left">Cantidad</th>
       <th class="text-left">Importe</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td class="col-md-1">1001</td>
       <td class="col-md-8">Producto de ejemplo 1</td>
       <td class="col-md-1 text-right">$10,000</td>
       <td class="col-md-1 text-center">100</td>
       <td class="col-md-1 text-right">$1,000,000</td>
     </tr>
     <tr>
       <td colspan="3" class="noborders"></td>
       <th class="text-right" scope="row">TOTAL</th>
       <td class="text-right">$1,000,000</td>
     </tr>
   </tbody>
 </table>

＆＃13;

＆＃13;

＆＃13;