Question

大多数情况下，按行组织表数据是有意义的。但是现在我正在处理一个比较多列数据的表。每列都是产品，因此我希望将所有产品数据组合在一起。

<tr> 
  <td>Name</td>
  <td>Price</td>
  <td>Weight</td>
  <td>Height</td>
  <td>Compatibility</td>
  <td>Designer</td>
  <td>Manufacturer</td>
  <td>Age Requirement</td>
</tr>

使用TR标记该行将水平运行，有没有办法让它垂直运行？

更新：我希望该表在此示例中显示为常规html：

<tr>  
  <td>Name</td> 
  <td>Name2</td> 
</tr>  
<tr>  
  <td>Price</td> 
  <td>Price2</td> 
</tr>  
<tr>  
  <td>Weight</td> 
  <td>Weight2</td> 
</tr>  
<tr>  
  <td>Height</td> 
  <td>Height2</td> 
</tr>

但我希望能够通过相关内容对其进行编码：

<tr>  
  <td>Name</td> 
  <td>Price</td> 
  <td>Weight</td> 
  <td>Height</td> 
</tr>  

<tr>  
  <td>Name</td> 
  <td>Price</td> 
  <td>Weight</td> 
  <td>Height</td> 
</tr>

换句话说，我希望表行标记（tr）像列一样。

Answer 1

<tr>  
  <td>Name</td> 
</tr>  
<tr>  
  <td>Price</td> 
</tr>  
<tr>  
  <td>Weight</td> 
</tr>  
<tr>  
  <td>Height</td> 
</tr>  
<tr>  
  <td>Compatibility</td> 
</tr>  
<tr>  
  <td>Designer</td> 
</tr>  
<tr>  
  <td>Manufacturer</td> 
</tr>  
<tr>  
  <td>Age Requirement</td> 
</tr>

如果您想要旁边的其他产品，您可以这样做：

<tr>  
  <td>Name</td> 
  <td>Name2</td> 
</tr>  
<tr>  
  <td>Price</td> 
  <td>Price2</td> 
</tr>  
<tr>  
  <td>Weight</td> 
  <td>Weight2</td> 
</tr>  
<tr>  
  <td>Height</td> 
  <td>Height2</td> 
</tr>  
<tr>  
  <td>Compatibility</td> 
  <td>Compatibility2</td> 
</tr>  
<tr>  
  <td>Designer</td> 
  <td>Designer2</td> 
</tr>  
<tr>  
  <td>Manufacturer</td> 
  <td>Manufacturer2</td> 
</tr>  
<tr>  
  <td>Age Requirement</td> 
  <td>Age Requirement2</td> 
</tr>

Answer 2

此解决方案可能无法在旧浏览器上运行，但这种方法的某些方面通常适用于我：

<style>
  .col {
    display: table-cell;
  }
</style>

<body>
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</body>

将表数据分组到列而不是行

2 个答案: