Question

我有一个这样的两排表：

---------------------------
| 1 Item | Total: $370.00 |
---------------------------
|   View Cart   Check-out |
---------------------------

我希望它显示为内联，如下所示：

| 1 Item | Total: $370.00 | View Cart   Check-out |

CSS可以实现吗？注意：不幸的是，这个代码是由我的CMS生成的，很难将其更改为使用div，然后使用CSS float：left或display：inline-block。

简化的HTML：

<table class="cart-block-summary">
 <tbody>
  <tr>
   <td class="cart-block-summary-items">1 Item</td>
   <td class="cart-block-summary-total">Total: $370.00</td>
  </tr>
  <tr class="cart-block-summary-links">
   <td colspan="2">View cart  Checkout</td>
  </tr>
 </tbody>
</table>

Answer 1

为我工作：

   table { width: 600px;}
    tr{float:left}

http://jsfiddle.net/N5fhU/

Answer 2

您还可以删除最后一个TR，它将在一行中显示所有内容

<table class="cart-block-summary">
 <tbody>
  <tr>
   <td class="cart-block-summary-items">1 Item</td>
   <td class="cart-block-summary-total">Total: $370.00</td>
   <td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
  </tr>
 </tbody>
</table>

使用CSS强制表行显示在同一行上

2 个答案: