仅限内部的边框间距

我需要能够在表格单元之间留出空间，但它也会在表格的两侧增加空间。如何去除侧面的空间？这里是fiddle。 <table>标签也可以用于此，但问题依然矗立仅限内部的边框间距

<div class="wrapper"> 
    <div class="table"> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
    </div> 
    <div class="something-else"> 
     some other elements, table sides should align with this 
    </div> 
</div> 

.wrapper { 
    border: 1px solid green; 
    padding: 5px; 
} 
.table { 
    display: table; 
    border-spacing: 15px 0; 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
} 
.something-else { 
    border: 1px solid red; 
    margin-top: 10px; 
}

来源

2013-03-19 skyisred

有没有理由你不使用'table'？ – 2013-03-19 22:20:33

也可以使用表，但问题将保持不变。如果你知道一个表的解决方案，请分享:) – skyisred 2013-03-19 22:27:14

看着你的小提琴，它看起来不像你试图呈现表格数据，但创建一个布局？如果这是正确的，我认为所有的'display：table'和'display：table-cell'都可能使问题复杂化。你能澄清一下（从更一般的意义上说）你在这里试图达到什么目的？ – 2013-03-19 22:35:26

根据您的具体要求，你可以用border-width和:first-child达到预期的效果：

.table { 
    display: table; 
    /* border-spacing: 15px 0; -- Removed this */ 
    table-layout: fixed; /* Added this (not required, but evened-out the column widths) */ 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
    border-width: 1px 1px 1px 15px; /* Added this */ 
} 
/* Added this */ 
.cell:first-child { 
    border-width: 1px; /* Resets 15px border to 1px for first 'cell' */ 
}

小提琴：http://jsfiddle.net/aLa6G/6/

来源

2013-03-20 00:22:05

这可能是你想要的。既然你已经包裹的一切作为一个表，我用多个表的想法，并创造了围绕第2排一个表，使其

http://jsfiddle.net/GGnrM/

HTML

<div class="wrapper"> 
    <div class="table"> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
     <div class="cell"> 
     </div> 
    </div> 
    <div class="table2"> 
     <div class="something-else"> 
      some other elements, table sides should align with this 
     </div> 
    </div> 
</div>

CSS

.wrapper { 
    border: 1px solid green; 
    padding: 10px 5px; 
} 
.table { 
    display: table; 
    border-spacing: 5px 0; 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    height: 50px; 
    border: 1px solid blue; 
} 
.table2 { 
    display: table; 
    margin-top:5px; 
    border-spacing: 5px 0; 
    width: 100%; 
} 

.something-else { 
    display: table-cell; 
    border: 1px solid red; 
    padding:1%; 
}

来源

2013-03-20 03:24:47

仅限内部的边框间距

回答

相关问题