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

Question

晚上好，我正在尝试对齐一张 table 以使其像图片一样，但没有成功，我能帮忙吗？

现在我是这样的:

我希望它看起来像这样:

这是我的html代码:

<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>

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>

更新的代码段:

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;
}

<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>