Многострочные ячейки таблицы, отображать каждую строку как отдельная ячейка

Question

я иметь структуру, как это (3 подстрок в каждой ячейке, но высота подстрок отличаются):

<table> 
    <tr> 
     <td> 
      <p>first<br/>row</p> 
      <p>second<br/>row</p> 
      <p>third<br/>row</p> 
     </td> 
     <td> 
      <p>first row</p> 
      <p>second row</p> 
      <p>third row</p> 
     </td> 
    </tr> 
</table> 

Можно формат (с помощью CSS) все подстроки смотреть же, как:

<table> 
<tr> 
    <td>first<br/>row</td> 
    <td>first row</td> 
</tr> 
<tr> 
    <td>second<br/>row</td> 
    <td>second row</td> 
</tr> 
<tr> 
    <td>third<br/>row</td> 
    <td>third row</td> 
</tr></table> 

UPD Я использую «сетка» Гобелен компонент, чтобы показать некоторую информацию. Каждая строка в сетке представляет собой информацию об одном объекте. Каждый столбец является одним свойством. Он генерирует html-код следующим образом: Working Fiddle . Мне нужно показать 'id' прямо напротив правильного 'name', а не в центре

Answer 1

Да, используйте display: table-cell в p элементов.

td > p{ 
    display: table-cell; 
} 

Working Fiddle