具有垂直数据的水平HTML表

Question

I have been struggling to create a html table(I also use bootstrap). To make it easier to understand what I want to achieve, see picture below.

https://s15.postimg.org/ulq2gxap7/Hiro_Table.jpg

Depending on how many elements(lets say cars), the user selects, I want to create a column for each car. I have an array with the id of the selected itmes.

For now I do like this:

For(selected){
//get data from my object with id
.....

$('table thead tr').append(html);  
$('table tbody').append(htmlData);
}

Which outputs:

-----car1-------------car2--------------car3

---

----1911-------------Italian------------Red

----1923 ------------Italian------------Yellow

----1923 -----------Swedish------------Green

I want as the picture I link to.

Answer 1

You didn't supplied the full HTML and JS code but basically between each TR with three TDs you need to append tr with td that have collspan=3

for example:

 table td { border: 1px solid #CCC; text-align: center; } 

 <table> <tr> <td colspan="3">italian</td> </tr> <tr> <td>Fiat</td> <td>Ferarri</td> <td>1992</td> </tr> <tr> <td colspan="3">German</td> </tr> <tr> <td>BMW</td> <td>VW</td> <td>Mercedes</td> </tr> </table>