表格中单元格之间的空间

Question

我想知道是否有办法在表格中的单元格之间放置一点空间，

这是一个使用这个原则的自制表：

<div class="table">
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
</div>

CSS

.table {
    display: table;
    width: 100%;
}
.tr { 
    display: table-row; 
}
.td { 
    display: table-cell;
}

这不是我使用的代码，但我像这样构建它，我的代码很长，但它的工作很长，但它的工作方式就像这样，这就是它的图片。

正如你所看到的，它的3个div，每个都是一个单元格，现在它们之间有空间使用table div

border-collapse:separate;
border-spacing: 5px;

但是这给了我一个右侧和左侧的空间，我只想在div nr1-2和nr2-3之间，所以基本上只在中间的两侧？因为我已经使用了边框，所以不能使用白色边框来实现这一点！

Answer 1

而不是border-spacing: 5px;，我使用margin尝试了否定position:relative。

body{
  background: #ccc;
}
div{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.table {
display: table;
width: 100%;
  padding: 0 5px;
}
.tr { 
display: table-row; 
}
.td { 
 background: #fff;
display: table-cell;
  position: relative;
  width: 33.333%;
}
.td:first-child{
  left: -5px;
}
.td:last-child{
  right: -5px;
}

<div class="table">
<div class="tr">
    <div class="td">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloribus omnis aliquid ea cumque est ipsam praesentium ratione consectetur quis fuga illo cupiditate error, perferendis, veritatis quae soluta suscipit a?</div>
    <div class="td">asdf</div>
    <div class="td">asdf</div>
</div>
</div>

https://jsfiddle.net/nk4xLdgn/