如何使用雙邊框創建HTML/CSS表格？

Question

我該如何創建一個雙邊框？

我試過設置1px的純黑色邊框<table>和<tbody>，以及它們之間的間距添加/填充，但沒有奏效。該頁面也在SharePoint上運行，默認情況下，它將border-collapse到collapse設置爲所有表格。

Answer 1

，這可能爲你工作

table { 
 
    border: 1px solid #000; 
 
} 
 

 
table tbody { 
 
    display: block; 
 
    border: 1px solid red; 
 
}

<table> 
 
    <tbody> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
    </tbody> 
 
</table>

Answer 2

border-style CSS屬性可以設置爲double，但它至少需要3px邊框寬度。常見錯誤是設置1px邊框寬度，這對創建雙邊框不起作用。

實例，將工作：

table { 
    border: 3px double black; 
} 

另一個更復雜的伎倆，工作原理是利用不同的造型爲和。外表將使用1px solid black邊框，而<tbody>將使用inset陰影而不是邊框​​。

HTML：

<table> 
    <tbody> 
     <tr><td>That's a test!</td></tr> 
    <tbody> 
</table> 

CSS：

table { 
    border: 1px solid black; 
    padding: 2px; 
    border-collapse: separate; 
} 

tbody { 
    border-spacing: 3px; 
    box-shadow: inset 1px 1px 0 black, inset -1px -1px 0 black; 
    border-collapse: separate; 
} 

注意有兩個插圖影子：一個頂級/左，一個底部/右。

Answer 3

您可以通過添加<div>標籤內的<table>標籤做到了這一點，並應用一些填充到<div> tag.I'm添加下面的代碼片段。

table{ 
 
    border:1px solid #000; 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
div{ 
 
    border:1px solid green; 
 
    padding:2px; 
 
    } 
 

<div> 
 
    <table> 
 
    <tr><td>one</td><td>two</td></tr> 
 
    </table> 
 
</div>

Answer 4

嘗試......

.tbl-bdr { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #fff; 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    margin: 20px; 
 
} 
 
.tbl-bdr:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: -10px; 
 
    right: -10px; 
 
    bottom: -10px; 
 
    border: 1px solid green; 
 
    z-index: -1; 
 
}

<table class="tbl-bdr"> 
 

 
</table>