僅限內部的邊框間距

我需要能夠在表格單元之間留出空間，但它也會在表格的兩側增加空間。如何去除側面的空間？這裏是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

僅限內部的邊框間距

回答

相關問題