CSS & HTML: Spacing content at the beginning and end of table row issues

Question

I have been driving myself crazy, wondering how to do this. I have a table. at one end of the table row i want my product description and the other end my product price and add to cart button. With nothing in-between. However, i can not get this to work right now without using endless new table row tags, which i do not want do to.

What i have tried:

• Margin right
• padding

I cannot use border spacing or cellspacing as i only want this to happen on 1 out of 2 of my table rows. any suggestions?...

 td.spacing{ margin-right: 30%; background-color: red; } 

 <table> <tr> <td><p id='prods_nme'>$prod_name</p></td> </tr> <tr> <td class='spacing'><p id='prods_desc'>$prod_desc</p></td> <td></td> <td class='spacing' rowspan='2'><p id='prods_price'>£$prod_price</p></td> <td><a href='Shopping_cart.php?add_item=$prod_id'>+</a></td> </tr> </table> 

I would like it to look like this:

Answer 1

You are overthinking this.

You don't need extra rows.

 table { width: 100%; border: 1px solid grey; } table td { border: 1px solid red; } table td.full { width: 100%; } 

 <table> <tr> <td class="full"> <p id='prods_nme'>My Product</p> <p id='prods_desc'>My Product Desription</p> </td> <td class="price"> <p id='prods_price'>£10.00</p> </td> </tr> <tr> <td class="full"> <p id='prods_nme'>My Product</p> <p id='prods_desc'>My Product Desription</p> </td> <td class="price"> <p id='prods_price'>£10.00</p> </td> </tr> </table>