Monroe Monroe - 7 months ago 13
HTML Question

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

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:

enter image description here

Answer

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>