Horisontalの垂直データ付きHTMLテーブル

Question

私はhtmlテーブルを作成するのに苦労しています（私もブートストラップを使用しています）。私が達成したいことをより理解しやすくするために、下の図を参照してください。

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

はどのように多くの要素に応じて、ユーザーが選択は、私はそれぞれの車の列を作成したい、（車を言うことができます）。私は選択されたitmesのIDを持つ配列を持っています。今の

私はこのように実行します。

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

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

出力する：

を----- CAR1 -------------のCaR2 ----- --------- CAR3 ---- 1911

---

-------------イタリア------------レッド

---- 1923 ------------イタリア語------------イエロー

---- 1923 -----------スウェーデン語------------緑

私はリンク先の画像としてしたいです。

Answer 1

あなたは、たとえばcollspan = 3

を持っているあなたは、TDとTRを追加する必要が3つのTDとの完全なHTMLとJSコードを供給しますが、基本的には各TRの間にありませんでした：

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>