如何在使用顯示錶格行時使用邊框和填充

Question

我正嘗試使用display:table css屬性創建表格。

表需要有在底部邊框和每一行內的填充，如：

.row{ 
    display: table-row; 
    border-bottom: 1px solid #e5e5e5; 
    padding: 20px 0; 
} 

我已閱讀，我可以利用這個

.table { 
    border-collapse: collapse; 
} 
.row { 
    border-bottom: solid #000 3px 
} 

我得到的邊界也知道，我可以用

.table { 
    display:table; 
    border-collapse:separate; 
    border-spacing:5px; 
} 
.row { 
    display:table-row; 
} 

我現在的困境，我不能用機器人得到填充h同時。 邊境只有當我使用border-collapse: collapse;而填充當我使用border-collapse:separate;

是否有任何解決方案或替代方法以獲得兩個只能工程，填充，並在同一時間的邊界？

編輯 下面有一個例子（邊界不工作）：

.table { 
 
    display:table; 
 
    border-collapse:seperate; 
 
    border-spacing:15px; 
 
} 
 
.row { 
 
    display:table-row; 
 
    border-bottom:3px solid #000; 
 
} 
 
.cell{ 
 
    display:table-cell; 
 
    background-color: #eee; 
 
    padding:20px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content<br> in another row 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
</div>

Here's also a jsfiddle in which you can try to change the border-collapseattribute

編輯2

下面是我想要的樣子。

Answer 1

你正在尋找的答案是不可能直接。但如果你想用一些黑客或其他方式來管理它，這裏就是解決方案。 我只是做了一個演示，你可以根據你的需求進行定製。

.table { 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
    background-color: #eee; 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 

 
.cell:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    width: 100%; 
 
    height: 3px; 
 
    margin-top: 6px; 
 
    background: #000; 
 
} 
 

 
.cell:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 100%; 
 
    width: 15px; 
 
    height: 3px; 
 
    margin-top: 6px; 
 
    background: #000; 
 
} 
 

 

 
/* Delete below code if you want border below last row as well*/ 
 

 
.row:last-child .cell:before, 
 
.row:last-child .cell:after { 
 
    content: none; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content<br> in another row 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

編輯

喜歡這個？

.table { 
 
    display:table; 
 
    border-collapse:separate; 
 
    border-spacing:5px; 
 
} 
 
.row { 
 
    display:table-row; 
 
} 
 
.cell{ 
 
    display:table-cell; 
 
    border: 1px solid blue; 
 
    background-color: #eee; 
 
    padding:20px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content<br> in another row 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    <div class="cell"> 
 
     some content 
 
    </div> 
 
    </div> 
 
</div>