Группировка данных таблицы по столбцам, а не по строкам

Большую часть времени имеет смысл организовать данные таблицы в строках. Однако сейчас я имею дело с таблицей, которая сравнивает данные по нескольким столбцам. Каждый столбец является продуктом, поэтому я хотел бы объединить все данные о продукте.

<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) действовал как столбец.

Источник

2 ответа

Решение
<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>
Источник

Это решение может не работать в старых браузерах, но что-то вроде этого подхода обычно работает для меня:

<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>
Источник
Другие вопросы по тегам