Bootstrap : complex table - css

Question

I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...