Bootstrap：复杂的表格

Question

我有一个特定的桌子要显示 它显示一组对象 我的对象包含：

• 常用数据（表格中以黑色显示）
• ＆＃39;收入＆＃39;特定数据（表中以红色显示）
• ＆＃39; depense＆＃39;特定数据（表中以绿色显示）

我做了一些看起来像我想要的东西，但我不确定我是否以干净的方式做到了。 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>

另外：为了在两行上显示每条记录，我必须添加一个名为＆＃34; id invoice＆＃34;的列，然后因为我不希望它显示我添加了一些css来隐藏它。
我很确定我的代码很脏，但我不知道如何以另一种方式做到这一点。

如果有人可以帮我这个......