如何在邊界間距設置爲獨立的tr上有一個連續的邊框底部？

我需要一個表格有一個連續的底部邊界的行，但表格單元格應該有一個垂直空白的背景。如何在邊界間距設置爲獨立的tr上有一個連續的邊框底部？

問題是，我不能有一個跨越整行的邊界，同時有邊界間距設置。我怎樣才能關閉邊界，但保持白色的差距？

這裏是我的標記：

<table> 
    <thead> 
    <tr> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
     <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td> 
    </tr> 
    </tbody> 
</table>

我的CSS定義以下樣式：

table { 
    border-collapse: separate; 
    border-spacing: 1.5rem 0; 
    tr { 
    border-bottom: 1px solid #dcdcdc; // This is what I need 
    } 
    td { 
    padding: 1.5rem; 
    background-color: #fafafa; 
    border-bottom: 1px solid #dcdcdc; // Or this... 
    } 
}

來源

2017-03-23 josi

可以使用:before僞元素：

table { 
    border-collapse: separate; 
    border-spacing: 1.5rem 0; 

    td { 
    padding: 1.5rem; 
    background-color: #fafafa; 
    border-bottom: 1px solid #dcdcdc; 
    position: relative; 

    &:not(:first-child):before { 
     content: ''; 
     height: 1px; 
     width: 25px; 
     background: #dcdcdc; 
     display: block; 
     position: absolute; 
     left: -25px; 
     bottom: -1px; 
    } 
    } 
}

DEMO

來源

2017-03-23 18:43:51

如何在邊界間距設置爲獨立的tr上有一個連續的邊框底部？

回答

相關問題