Css 显示表格单元格：是否删除左右边框空间？

我想并排显示四个元素。我正在使用

display:table

和

display:table cell

来完成以下任务：

#容器{
宽度：960px；
背景颜色：橙色；
高度：400px；
}
#桌子{
显示：表格；
表布局：固定；
边界间距：10px；
宽度：100%；
}
分部项目{
显示：表格单元格；
高度：150像素；
背景颜色：蓝色；
}

文本1
文本2
文本3
文本4

一个简单的方法是在单元格上使用

边框，而不是
边框间距
。然后，您可以取消最后一个单元格中第一个单元格的
边框。此外，保持容器的颜色相同

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

示例代码段：


#容器{
宽度：960px；
背景颜色：橙色；
高度：400px；
}
#桌子{
显示：表格；
表布局：固定；
宽度：100%；
}
分部项目{
显示：表格单元格；
高度：150像素；
背景颜色：蓝色；
边框：10px实心橙色；
左边界：无；
}
div.item:最后一个子项{右边框：无；}

文本1
文本2
文本3
文本4
您可以删除表div并使container display: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%;
}


文本1
文本2
文本3
文本4
#容器{
显示器：flex；
证明内容：之间的空间；
}
.项目{
背景色：红色；
宽度：24%；
}

谢谢，这个很好用。在我的示例中，我没有表示每个单元格中都有100%宽度的图像。当我从最后一个元素中删除边框时，它会稍微拉伸图像。有办法解决这个问题吗？谢谢，您可以使最后一个div的右边框与div的颜色相同，即蓝色。