Question

我有一个带有html的表格如下：

<div id="cart">
<table>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th >Price</th>
<th>Qty</th>
<th >Options</th>
<th >Value</th>
</tr>
</thead>
<tbody>

<tr>
<td class="item-pid">5</td>
<td class="item-name"></td>
<td class="item-price"></td>
<td class="item-quantity">1</td>
<td class="options">color</td>
<td class="item-total">$23.52</td>
</tr>
<tr>

<td></td>
<td></td>
<td></td>
<td></td>
<th>Sub-Total</td>
<td class="third">5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Shipping Option</td>    
<td class="third">EMS</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Grand Total</td>    
<td class="third">100</td>
</tr>

<CAPTION ALIGN="bottom">
This is the table's bottom caption
</CAPTION>
</tbody>
</table>
</div>

我需要将最后三行列小计，运费选项和总计作为一个独立的单列，并删除之前的所有td＆＃39; s。目前我正在补充：

<td><td><td><td>

将其对齐。所有先前的单元格显示空白。 我希望删除所有这些单元格，并将最后3个单元格对齐到右边。

这怎么可能？

我这里有Fiddle Demo ..

请求帮助。提前谢谢。

Answer 1

您可以将这3行代码更改为：

<tr>
<td colspan="5" style="text-align:right;">Sub-Total</td>
<td class="third">5</td>
</tr> 
<tr>
<td colspan="5" style="text-align:right;">Shipping Option</td>  
<td class="third">EMS</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">Grand Total</td>  
<td class="third">100</td>
</tr>

您可以使用colspan合并列和text-align:right以使文字对齐。

查看此Fiddle ..

表格最后对齐的单元格

1 个答案: