如何在HTML/CSS中創建此邊框樣式？

Question

我拼命尋找合適的代碼來創建的HTML/CSS表格邊框爲我的網站在這個圖像上看起來像：

我無法找到一個方法來做到這一點...

這裏的另一個畫面：

它看起來像細胞有一定的 「3D效果」 或這樣的事情....

Answer 1

下面是一個示例（請注意，樣品是不完整的答案，所以我的回答是），看到這一點，瞭解CSS基礎

下面的代碼會給你你想雖然的結果。

//HTML 
    <table style="border:none;"> 
    <tr> 
    <td>Corporate Finance</td> 
    </tr> 
    <tr> 
    <td>Derivatives</td> 
    </tr> 
    <tr> 
    <td>Economics</td> 
    </tr> 
</table> 

// CSS 
    table { 
     border-spacing: 5px; 
} 

table, th, td { 
    margin-top:2px; 
    border-left: 1px solid #E8E8E8; 
    border-bottom:2px solid #E8E8E8; 
    border-right:1px solid #E8E8E8; 
    margin-top:2px; 
} 

Answer 2

你可以用不同的方式使用它。但你必須學習基本的CSS。

.borderall td{border:1px solid #ccc;} 
 

 
.borderbottom td{border-bottom:1px solid #ccc;}

table 1 
 
<table width="100%" class="borderall"> 
 
<tr> 
 
    <td>block one</td> 
 
    <td>block one</td> 
 
    <td>block one</td> 
 
    </tr> 
 
</table> 
 
<br/> 
 
table 2 
 
<table width="100%" class="borderall"> 
 
<tr> 
 
    <td>block one</td> 
 
</tr> 
 
    <tr> 
 
    <td>block one</td> 
 
</tr> 
 
    <tr> 
 
    <td>block one</td> 
 
</tr> 
 
</table> 
 
<br/> 
 
table3 
 
<table width="100%" cellpadding="0" cellspacing="0" class="borderbottom"> 
 
<tr> 
 
    <td>block one</td> 
 
</tr> 
 
    <tr> 
 
    <td>block one</td> 
 
</tr> 
 
    <tr> 
 
    <td>block one</td> 
 
</tr> 
 
</table>