3

我有一个看起来像这样的表（在 html 中）：

<div id="product_grid_one">
  <table>
    <tr>
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
    </tr>              
  </table>
</div>

这是它的CSS：

td { width: px; padding: 14px; border: 1px solid #c0c0c0; margin: 14px; }

基本上有一排有四个单元格。每个单元格都有一个垂直堆叠的图像、产品的文本描述和产品价格。现在，在这个三件套堆栈周围，我希望我的 td 元素（我认为它可以被视为一个块）有一个 14px 的填充，我可以设置它没有问题，这样就有一个 1px 的边框距离 14px一堆图像、文本和价格。到这里都没问题。

问题是上面没有设置边距！！@

我可以设置边距：200px；仍然没有区别，边距约为 1 或 2 个像素，似乎无法改变这一点。我已经在 Firefox 13.0.1 上试过了。

那么，如何设置边距？我希望表中每个 td 之间有 14 px。

这可以通过 CSS 实现吗？

建议使用表格的 cellspacing 属性。所以我可以使用以下等效的 CSS：

table { border-collapse: separate; border-spacing: 14px; }

但这对我没有好处，因为我希望仅在表格内应用边框间距。我不希望整个表格的两侧（左侧或右侧）有任何间距。有什么解决办法吗？

好吧，我终于能够找到解决方案。我设法用负边距解决了这个问题，以便表格在表格周围添加的边框间距（除了在各种表格数据和表格标题之间）在向左移开时不会变得可见通过使用具有负值的左边距。

table { border-collapse: separate; border-spacing: 13px; margin-left: -13px; }
4

1 回答 1

1

你能检查一下

.style { border-spacing: 0px; }

产生什么不同？当恐龙在地球上行走时，他们使用

<td cellspacing="0">

但如果你今天这样做，你的同事中的某些人会打你一巴掌。如果他们这样做了，他们可能会给你一些不推荐使用的东西列表的链接。

于 2012-07-17T17:41:07.780 回答