css和html中的3x3表每一面都有不同的颜色

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