title: Bootstrap : complex table
body: <p>I have a specific table to display.<br>
  It displays an array of objects.<br>
  My object contains:  </p>
  
  <ul>
  <li>common data (displayed in black in the table)  </li>
  <li>'income' specific data (displayed in red in the table)  </li>
  <li>'depense' specific data (displayed in green in the table)  </li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/LOThF.png" alt="enter image description here"></p>
  
  <p>I did something that looks like what I want but I'm not sure I did it in the clean way.
  <a href="http://plnkr.co/edit/I4NNCRFb1Ehcy4yPXZGS?p=preview" rel="nofollow noreferrer">plunkr</a></p>
  
  <pre><code>&lt;table border=1&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th colspan=5&gt;Depense&lt;/th&gt;
              &lt;th colspan=5&gt;Income&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th rowspan=2&gt; id invoice&lt;/th&gt;
              &lt;th&gt;title1&lt;/th&gt;
              &lt;th&gt;title2&lt;/th&gt;
              &lt;th&gt;title3&lt;/th&gt;
              &lt;th&gt;title4&lt;/th&gt;
              &lt;th&gt;title5&lt;/th&gt;
              &lt;th&gt;title6&lt;/th&gt;
              &lt;th&gt;title7&lt;/th&gt;
              &lt;th&gt;title8&lt;/th&gt;
              &lt;th&gt;title9&lt;/th&gt;
              &lt;th&gt;title10&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;depense1&lt;/th&gt;
              &lt;th&gt;depense2&lt;/th&gt;
              &lt;th&gt;depense3&lt;/th&gt;
              &lt;th&gt;depense4&lt;/th&gt;
              &lt;th&gt;depense5&lt;/th&gt;
              &lt;th&gt;income1&lt;/th&gt;
              &lt;th&gt;income2&lt;/th&gt;
              &lt;th&gt;income3&lt;/th&gt;
              &lt;th&gt;income4&lt;/th&gt;
              &lt;th&gt;income5&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr &gt;
              &lt;td rowspan=2&gt;id invoice : 10&lt;/td&gt;
              &lt;td&gt;10/02/2015&lt;/td&gt;
              &lt;td&gt;tartenpion&lt;/td&gt;
              &lt;td&gt;II&lt;/td&gt;
              &lt;td&gt;AA&lt;/td&gt;
              &lt;td&gt;1.25&lt;/td&gt;
              &lt;td&gt;FRED&lt;/td&gt;
              &lt;td&gt;fact 12&lt;/td&gt;
              &lt;td&gt;10&lt;/td&gt;
              &lt;td&gt;13&lt;/td&gt;
              &lt;td&gt;xx&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;avoir1&lt;/td&gt;
              &lt;td&gt;avoir2&lt;/td&gt;
              &lt;td&gt;avoir3&lt;/td&gt;
              &lt;td&gt;avoir4&lt;/td&gt;
              &lt;td&gt;avoir5&lt;/td&gt;
              &lt;td&gt;vente1&lt;/td&gt;
              &lt;td&gt;vente2&lt;/td&gt;
              &lt;td&gt;vente3&lt;/td&gt;
              &lt;td&gt;vente4&lt;/td&gt;
              &lt;td&gt;vente5&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.<br>
  I am pretty sure my code is dirty, but I don't know how to do that another way.</p>
  
  <p>If someone can help me on this...  </p>