如何使用 html5/CSS 实现垂直表格答案

【问题标题】：How to implement vertical tables using html5/CSS如何使用 html5/CSS 实现垂直表格
【发布时间】：2016-03-22 10:06:00
【问题描述】：

所以基本上表格数据在每一行中并且它们是水平形成的。像这样：

Normal Table

但我想将数据放在列中，以便形成一个垂直表。像这样：

Vertical Table

知道如何解决这个问题吗？我也在使用引导程序。

【问题讨论】：

你能提供更多关于你的桌子是如何建造的信息吗？您是动态创建此表还是硬编码？
只是让第一列包含标题？具体问题是什么？
@lukehillonline 不，它不是动态创建的。只是一个简单的表
@PeeHaa 嗯，是的，但我想在语义上这样做。我可以用 css 做到这一点，并将我的标题放在每行的第一个 td 标签中。但这没有任何意义，所以我想知道是否有其他方法可以做到这一点
什么td标签？它们是标题。使用th标签

标签： css html twitter-bootstrap html-table

【解决方案1】：

您只需将标题与数据放在同一行即可。

<table style="width:100%">
  <tr>
    <th scope="row"><strong>Name</strong></th>
    <td>Name1</td>      
    <td>Name2</td>      
    <td>Name3</td>
  </tr>
  <tr>
    <th scope="row"><strong>Tell</strong></th>
    <td>Tell1</td>      
    <td>Tell2</td>
    <td>Tell3</td>
  </tr>
  <tr>
    <th scope="row"><strong>Job</strong></th>
    <td>Job1</td>       
    <td>Job2</td>       
    <td>Job3</td>
  </tr>
  <tr>
    <th scope="row"><strong>Address</strong></th>
    <td>Address1</td>       
    <td>Address2</td>       
    <td>Address3</td>
  </tr>
</table>

【讨论】：