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

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

1 голос
/ 09 августа 2010

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

<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 ]

1 голос
/ 09 августа 2010 
<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>
0 голосов
/ 03 мая 2013

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

<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>
...