3x3的表格和HTML每一面不同的顏色

Question

所以我一直在試圖找出如何，因爲它是在這張照片顯示的文字一模一樣表：

但沒有結果。我不知道如何用不同的顏色來劃分它，以便綠色與其他顏色重疊並在每個網格中保留單詞。

如果有人幫我給我一些想法，我會非常感激。

Answer 1

這是您的WORKING JSFIDDLE。

table{ 
    border-collapse: collapse; 
    font-size: 24px; 
} 
table tr td{ 
    border-top: 5px solid #9F2C2F; 
    border-right: 5px solid #057C08; 
} 
table tr th:first-child{ 
    border-top: 5px solid yellow; 
    border-right: 5px solid #057C08; 
} 
table tr td:last-child{ 
    border-right: none; 
} 

Answer 2

<style type="text/css"> 

table 
{ 
    border-collapse: collapse; 
} 

table tr td:last-child 
{ 
    border-right: 0px; 
} 

.first 
{ 
    border-top:3px solid yellow; 
} 
.second { 
    border-top:3px solid red; 
    border-left:3px solid green; 
    border-right:3px solid green; 
} 

</style> 

<table> 
<tr> 
<td class='first'>Virsraksts 1</td> 
<td class='second'>suna 1</td> 
<td class='second'>suna 2</td> 
</tr> 
<tr> 
<td class='first'>Virsraksts 2</td> 
<td class='second'>suna 3</td> 
<td class='second'>suna 4</td> 
</tr> 
<tr> 
<td class='first'>Virsraksts 3</td> 
<td class='second'>suna 5</td> 
<td class='second'>suna 6</td> 
</tr> 
</table> 

Answer 3

另一個工作的CSS可能是：

http://jsfiddle.net/wpwu5mfs/1

td, tr, table{ 
    border-collapse: collapse; 
} 
td{ 
    border-top: solid 4px red; 
} 
td:first-child{ 
    border-top: solid 4px yellow; 
} 
td:not(:first-child){ 
    border-left: solid 4px green; 
}