显示表格单元格:删除右边界和左边界? [英] Display Table-Cell: Remove Right and Left Border Space?

问题描述

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

I'd like to display four elements side by side. I'm using display: table and display: table-cell to accomplish this:

#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的边缘齐平，并在内部单元格之间保持相等的间距?

How can I make the rightmost and leftmost cells flush with the container div's edge and maintain equal spacing between the inner cells?

谢谢！

推荐答案

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

An easy way would be to use border on cells instead of border-spacing. Then you could cancel out border on the first of last cell. Also, keep the colour same as that of your container.

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>

这篇关于显示表格单元格:删除右边界和左边界?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！