第一个项目之前和最后一个项目之间没有边框间距

Question

我有一张假表。我使用border-spacing属性在它们之间创建一个空格。但是这也会在第一个单元之前和最后一个单元之后创建间距。

我希望它只在这两列之间创建空间。

HTML：

<div class="table"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</div> 

CSS：

.table { 
    display: table; 
    width: 100%; 
    border-spacing: 11px 0; 
    border: 1px solid #222; 
} 

.cell { 
    display: table-cell; 
    width: 50%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

的jsfiddle：http://jsfiddle.net/ACH2Q/

Answer 1

如果你看一下spec在CSS表，你会发现那里的border-spacing适用均匀，添加例如您的table-cell元素的余量将被忽略。

所以似乎没有干净的解决方案，以使用div s的display: table除了相当脏黑客您的问题（我发现这个one使用“隔离的div”）。

但是如果您可以使用“真实”表来代替，那么您可以使用我认为完全可以接受的解决方案。请参阅此jsFiddle更新您的原件。

的标记（我加了一列）：

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td class="last"></td> 
    </tr>   
</table> 

的想法是让内td小号diplay:inline-block这使得它们响应利润率试。然后，您应用CSS选择器规则td + td，该规则选择所有td，但是第一个。对这些元素应用margin-left以获得“内部空间”。最后你必须float:right最后一列使它与右边的表格边界相加。

table { 
    width: 100%; 
    border: 5px solid #222; 
    border-collapse: separate; 
} 

td + td { 
    margin-left: 8%; 
} 

td.last { 
    float: right; 
} 

td { 
    display: inline-block; 
    width: 27%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

Answer 2

您可以使用border-spacing属性为所有表格单元格添加间距。然后使用margin-left和margin right从父级删除外部边界间距。

.container { 
    max-width: 980px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid { 
    margin-left: -20px; /* remove outer border spacing */ 
    margin-right: -20px; /* remove outer border spacing */ 
} 

.row { 
    display: table; 
    table-layout: fixed; /* keep equal cell widths */ 
    width: 100%; /* need width otherwise cells aren't equal and they self collapse */ 
    border-spacing: 20px 0; /* best way to space cells but has outer padding */ 
} 

.col { 
    display: table-cell; 
    vertical-align: top; 
} 

唯一的缺点是，你需要额外的div嵌套，因为该表需要一个宽度为100％和保证金的权利将无法正常工作。

<div class="container"> 
    <div class="grid"> 
     <div class="row"> 
      <div class="col">col</div> 
      <div class="col">col</div> 
      <div class="col">col</div> 
     </div> 
    </div> 
</div>