div之间的空间-显示表格单元格


96

我这里有两个div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

有没有办法在这两个div之间分隔空间display:table-cell

Answers:


192

您可以使用border-spacing属性:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin演示

还有其他选择吗?

好吧,不是真的。

为什么?

  • margin属性不适用于display: table-cell元素。
  • padding 属性不会在单元格的边缘之间创建空间。
  • float属性破坏了table-cell能够与其父元素一样高的元素的预期行为。

还有其他选择吗?当然可以position: relative
Jongosi 2014年

@Jongosi根据规格的效果position: relativetable-*-grouptable-rowtable-columntable-cell,和table-caption元件是未定义。
Hashem Qolami 2014年

3
您还可以创建一个与背景颜色相同的单边边框。border-right: 10px solid #FFF。当我在table-cell元素之间需要一些空间时,在设计CSS下拉菜单时,这对我来说效果很好。
armadadrive

1
您也可以纯粹为间隔添加单元格。这并不理想,但是至少可以避免尝试关闭最右边单元格的边框间距的麻烦。
丹尼尔(Daniel)

我还希望“填充”仅在“单元格”的1个边缘上,所以我不得不使用armadadrive的解决方案,除了我为透明边框使用了rgba(0,0,0,0)的边框颜色,所以我不必担心背景颜色/图像。右边框:10px实心rgba(0,0,0,0);
JAX

19

尽可能使用透明边框。

JSFiddle演示

https://jsfiddle.net/74q3na62/

的HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

的CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

说明

您可以使用该border-spacing属性,如公认的答案所示,但这不仅会在表单元格之间生成空间,还会在表单元格与表容器之间生成空间。这可能是不需要的。

如果您不需要表格单元格上的可见边框,则应该使用transparent边框来生成单元格边距。需要设置透明边框background-clip: padding-box;,否则表格单元格的背景颜色会显示在边框上。

IE9以上版本(和所有其他现代浏览器)均支持透明边框和背景剪辑。如果您需要IE8兼容性,或者不需要实际的透明空间,则只需设置白色边框颜色,然后将其background-clip排除在外即可。


实际上,“ border-right”设置足以在它们之间提供空间,不需要“ table”声明。
forsberg

0
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

0

好了,上面的方法确实有效,这是我的解决方案,它所需的标记少了一点,而且更加灵活。

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>


-6

用任何名称创建一个新的div(我将只使用table-split)并为其设置宽度,而不添加内容,同时将其放置在需要分隔的必要div之间。

您可以添加所需的任何宽度。我只用了0.6%,因为这是我必须要做的。

.table-split {
  display: table-cell;
  width: 0.6%
}
<div class="table-split"></div>


10
这是一个糟糕的解决方案。

1
当将实际的表格元素用于布局时,这是一种常见的策略,这也是该方法现在已过时的部分原因。
rakitin '16

由于只能使用CSS来完成,因此应避免使用html
Toni Michel Caubet,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.