修复div的角单元格的单元格间距[display：table]

Question

我正在为我的内部css框架开发一个基于display: table的网格方法，并且只是遇到了整个问题的一个关键问题。基本上，我希望我的布局看起来像这样： 此处的灰色区域应该来自cell-spacing属性。理想情况下，来源看起来像这样，没有新的发明：

<div class="unit">
    <div class="one third"></div>
    <div class="two thirds"></div>
</div>

这就是我所谈论的问题。实际上，cell-spacing是为所有单元格定义的，并用固定边距包裹它们。在我的情况下，我不希望它将角单元包裹在相应的边上（例如，左上角的单元格在顶部和左侧不会产生间距）。我想到的第一个明显的解决方案是使用负边距：

.unit {
    display: table;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    overflow: auto;

    border-spacing: 0.2em;
    margin: -0.2em;
}

不幸的是，这并没有像预期的那样奏效。它确实删除了左上方的间距，但是留下了一个未经修改的右侧间距。有关解决这个问题的任何想法吗？

Answer 1

你的方法很好，但问题是表格不够宽。您可以使用calc修复此问题：

width: calc(100% + 2*0.2em);

然后，该表将比其包含块更宽。但这不是一个大问题，因为由于负边距，细胞将被正确定位。您只需要将overflow: hidden添加到容器中。

＆＃13;

＆＃13;

.wrapper {
  overflow: hidden;
}
.unit {
  display: table;
  overflow: auto;
  background: #aaa;
  border-spacing: 2em;
  margin: -2em;
  width: 100%; /* fallback */
  width: calc(100% + 2*2em);
}
.unit > * {
  display: table-cell;
  border: 2px solid;
  background: #fff;
}

＆＃13;

<div class="wrapper">
  <div class="unit">
    <div class="one third">a</div>
    <div class="two thirds">b</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;