显示表格-单元格:移除左右边框空间

Question

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

#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;
  }

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

我如何使最右边和最左边的单元格与容器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 */ 

<<p> 例子片段/strong>:

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