仅限表格单元格的内边框

Question

我正在尝试为内部部分添加表格边框，我不希望将边框放在第一个和最后一个单元格中。

所以，我试过了：

 .grid > div:last-of-type {
      border-right: none;
 }  

然而，正如您在图像中看到的那样，最后一个单元格比现在的其余单元格大5px，这是因为当我们从中移除填充时它正试图填充留下的空白空间......我怎么能删除填充，但保持其高度与其他高度相同？也许是一种让所有这些都适合伸展的方法？请记住，我无法增加一个固定的高度，因为细胞数量会发生变化，而且它们的高度可能会有所不同。

我还尝试添加border-collapse:collapse;它们伸展它们（太棒了！）但是中间单元格现在比其他两个单元格略小。

这是一个JsFiddle：http://jsfiddle.net/ju76y/5/ （向小提琴添加图像）

.grid {
   width: 100%;
   overflow: hidden;
   background-color: green;
   display: table;
   table-layout: fixed;
   word-wrap: break-word;

   text-align: center;
   letter-spacing: 0px;
   word-spacing: 0px;
}

   .grid > div {
      display: table-cell;
      vertical-align: top;
      border-right: 5px solid red;
   }

   .grid > div:last-of-type {
      border-right: none;
   } 

Answer 1

尝试将其添加到单元格属性：

box-sizing:border-box;

Answer 2

这将使最后一个div与其他div正确对齐

.grid > div:last-child > div {
   margin-top: -2px;
}

<强> DEMO

同样需要适用于第一个孩子

.grid > div:first-child > div {
   margin-top: -2px;
}