带有垂直数据的水平 HTML 表格

Question

我一直在努力创建一个 html 表（我也使用引导程序）。为了更容易理解我想要实现的目标，请参见下图。

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

根据用户选择的元素数量（比如说汽车），我想为每辆汽车创建一个列。我有一个带有所选项目 id 的数组。

现在我喜欢这样：

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

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

哪些输出：

-----汽车1-------------汽车2--------------汽车3

---

----1911-------------意大利语------------红色

----1923 ------------意大利语------------黄色

----1923 ------------瑞典语------------绿色

我想要作为我链接到的图片。

Answer 1

您没有提供完整的 HTML 和 JS 代码，但基本上在每个带有三个 TD 的 TR 之间，您需要在 tr 和 td 中附加 collspan=3

例如：

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>