显示表格单元格：删除左右边框空格？

Question

我想并排显示四个元素。我使用display: table和display: table-cell来完成此任务：

＆＃13;

＆＃13;

#container {
  width: 960px;
  background-color: orange;
  height: 400px;
  }

#table {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  }

div.item {
  display: table-cell;
  height: 150px;
  background-color: blue;
  }

＆＃13;

<div id="container">

  <div id="table">
    <div class="item">
      Text 1
    </div>
    <div class="item">
      Text 2
    </div>
    <div class="item">
      Text 3
    </div>
    <div class="item">
      Text 4
    </div>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

如何使最右边和最左边的单元格与容器div's边缘齐平，并保持内部单元格之间的间距相等？

谢谢！

Answer 1

一种简单的方法是在单元格上使用border而不是border-spacing。然后你可以在最后一个单元格的第一个上取消border。另外，保持颜色与容器的颜色相同。

div.item {
  display: table-cell;
  border: 10px solid orange; /* Same colour as of the container */
  border-left: none;         /* reset left border to keep uniform */
}
div.item:last-child { border-right: none; } /* remove from last one */ 

示例代码段：

#container {
  width: 960px;
  background-color: orange;
  height: 400px;
  }

#table {
  display: table;
  table-layout: fixed;
  width: 100%;
  }

div.item {
  display: table-cell;
  height: 150px;
  background-color: blue;
  border: 10px solid orange;
  border-left: none;
}
div.item:last-child { border-right: none; }

<div id="container">

  <div id="table">
    <div class="item">
      Text 1
    </div>
    <div class="item">
      Text 2
    </div>
    <div class="item">
      Text 3
    </div>
    <div class="item">
      Text 4
    </div>
  </div>
  
</div>

Answer 2

你可以删除表格div并使容器显示：在空格之间展开flex ..

<div id="container">
    <div class="item">
        Text 1
    </div>
    <div class="item">
        Text 2
    </div>
    <div class="item">
        Text 3
    </div>
    <div class="item">
        Text 4
    </div>
</div>

#container {
    display: flex;
    justify-content: space-between;
}
.item {
    background-color: red;
    width: 24%;
}

https://jsfiddle.net/kyy7qgLz/2/