在表格布局中将表格单元格 div 的边框粘贴到包装 div

【问题标题】：Sticking borders of table-cell divs to wrapper div in table layout在表格布局中将表格单元格 div 的边框粘贴到包装 div
【发布时间】：2015-06-12 23:57:23
【问题描述】：

我将为一个包含多个 div 的包装 div 使用表格布局（假设它是一个产品列表，连续 5 个）。

问题是当我将包装器的样式设置为 display:table 和 border-spacing: 25px ，这个边框也被应用到侧面 div （例如，假设我有 5 个 div，我不希望我最左边的 div 有左边距，也不希望我最右边的 div 有右边距。我想要我的最左边的 div 贴在包装 div 的左边框上，我最右边的 div 也是如此。）

我尝试和搜索了很多，但我没有找到合适的解决方案，并且在每个解决方案中，最右边和最左边的 div 与包装 div 之间的差距仍然存在。

你能帮我解决这个问题吗？

【问题讨论】：

你能发布你的代码/演示吗？

标签： html css css-float tablelayout

【解决方案1】：

嗯，实际上这取决于您的实际标记，但一种选择是用具有 overflow: hidden 的 inline-block 元素包装表格，并为表格提供负左/右边距：

.wrapper {
  border: 1px solid;
  display: inline-block;
  overflow: hidden;
}

.table {
  background-color: gold;
  display: table;
  border-spacing: 25px;
  margin: 0 -25px;
}

.row {
  display: table-row;
}

.col {
  display: table-cell;
  border: 1px solid;
}

<div class="wrapper">
  <div class="table">
    <div class="row">
      <div class="col">foo</div>
      <div class="col">bar</div>
      <div class="col">baz</div>
    </div>
  </div>
</div>

【讨论】：

谢谢哈希姆，让我检查一下
非常感谢，您的解决方案很有帮助。