CODEWITHSUNDEEP
htmlcss
adamf321
adamf321

Reputation: 179

Forcing table rows to appear on the same line using CSS

I have a two-row table like this:

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

I want it to display inline, like this:

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

Is this possible with CSS? Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.

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

Upvotes: 2

Views: 9762

Answers (2)

Manuel Choucino
Manuel Choucino

Reputation: 667

You could also remove the last TR that way it will look all in one line

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

Upvotes: 0

lvil
lvil

Reputation: 4336

Worked for me: 

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

http://jsfiddle.net/N5fhU/

Upvotes: 7

Related Questions