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

Question

我一直把自己逼疯了，想知道如何做到这一点。 我有一张 table 。在表格行的一端，我想要我的产品描述，另一端是我的产品价格，然后添加到购物车按钮。中间没有任何东西。 但是，如果不使用无穷无尽的新表格行标签，我现在无法让它工作，我不想这样做。

我尝试过的:

• 右边距
• 填充

我不能使用边框间距或单元格间距，因为我只希望在我的表格行中的 2 行中出现这种情况。有什么建议吗？...

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>

我希望它看起来像这样:

Answer 1

你想多了。

您不需要额外的行。

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>