3x3 table in css and html each side different colour - html

Question

So I've been trying to figure out how to code exactly the same table as it is shown in this picture:
But with no results. I've no idea how to divide it with different colours so the green overlaps others and keeps the words in each grid.
I'd be very thankful if someone helped me to gave me some ideas please.

Answer 1

Here is a WORKING JSFIDDLE for you.
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

Another working css could be:
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;
}

Answer 3

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