将 table-单元格 div 的边框粘贴到 table 布局中的包装器 div

Question

我将使用 table 布局作为包装器 div，它将包含许多 divs（假设它是一个产品列表，连续 5 个).

问题是当我将 wrapper 的样式设置为 display:table 并且 border-spacing: 25px ，这个边框也被应用到边 divs （例如假设我有 5 divs 并且我不希望我最左边的 div 有左边距并且不希望我最右边的 div 有右边距。我希望我最左边的 div 贴在包装纸 div 的左边框上，我最右边的 div 也一样。）

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

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

Answer 1

好吧，实际上这取决于您的实际标记，但一个选项是用具有 overflow: hidden 的 inline-block 元素包装 table 并为 table 提供一个负 left/right 保证金：

.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>

将 table-单元格 div 的边框粘贴到 table 布局中的包装器 div

Sticking borders of table-cell divs to wrapper div in table layout

html

css

css-float

tablelayout