将表数据分组为列而不是行答案

【问题标题】：Grouping table data into columns rather then rows将表数据分组为列而不是行
【发布时间】：2011-03-27 07:55:39
【问题描述】：

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

<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) 像一列一样。

【问题讨论】：

标签： css html semantics

【解决方案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>

【讨论】：

问题是当有 4 列时。它仍然按行分组。
我曾考虑过只使用多个表，但这行不通，因为如果比较行项目是多行并且其对应项是单行，除非我们强制每个行，否则我们将遇到对齐问题单元格高度。
我没关注，你能提供示例输出吗？
当您说“分组”时，您的意思是您希望产品的 HTML 组合在一起吗？如果是这样，不知道为什么这很重要......
是的。我希望所有数据都放在一起。我将发出 ajax 调用来更新列，将所有数据放在一个地方会非常好。这是#lazyweb的一个案例

【解决方案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>

【讨论】：