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

时间:2013-08-20 22:39:27

标签: html css css-tables

我这里有两个div:

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

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

有没有办法在这两个div(有display:table-cell)之间留出空间?

5 个答案:

答案 0 :(得分:183)

您可以使用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 Demo

还有其他选择吗?

,不是真的。

<强>为什么吗

  • margin属性is not applicabledisplay: table-cell元素。
  • padding属性不会在单元格的边缘之间创建空格。
  • float属性会破坏table-cell元素的预期行为,这些元素可以与其父元素一样高。

答案 1 :(得分:17)

如果可能,请使用透明边框。

JSFiddle演示

https://jsfiddle.net/74q3na62/

<强> HTML

$scope.$on('event_detail', function (event, args) {
        $scope.id = args;
        console.log($scope.id); // it works

});

$rootScope.$broadcast("event_detail", data.id_case); //make the braodcast

console.log($scope.id); // it will be no-more undefined

<强> CSS

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

说明

您可以使用.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,否则表格单元格的背景颜色会显示在边框上。

IE9向上(以及所有其他现代浏览器)支持透明边框和背景剪辑。如果您需要IE8兼容性或不需要实际的透明空间,您只需设置白色边框颜色并将background-clip: padding-box;保留。

答案 2 :(得分: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>

答案 3 :(得分: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>

答案 4 :(得分:-5)

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

您可以添加您认为必要的宽度。我只使用了0.6%,因为这是我必须要做的事情。

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