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; 
}