Динамическая высота для ячейки таблицы в горизонтальной таблице

Question

Я использовал this Ответ для создания горизонтальной таблицы, поскольку у меня фиксированное количество горизонтальных строк, но N количество вертикальных столбцов. Это работает очень хорошо, но поскольку строки HTML представляют собой столбцы, высота между ячейками не остается неизменной в отображаемых строках.

Добавив следующее к предоставленному ответу, я могу обеспечить, чтобы каждый столбец соответствовал странице, в результате чего произошел перенос текста, но тогда высота строк не обязательно совпадает.

td { 
    max-width: 200px; 
} 

JSFiddle example.

В скрипичной приведенном выше примере, как сделать ячейку с «Title» и ячейки с «Храброе сердце» соответствовать высоте третьей ячейки в этой строке?

Подсказка: правильный ответ заключается не в том, чтобы жестко определить высоту первых двух ячеек, так как я понятия не имею, как долго может быть другая ячейка, когда она будет добавлена ​​позже.

EDIT

Я не могу использовать JavaScript как HTML никогда не упрется стороне ничего клиента. Он отображается, а затем передается в программу создания PDF.

Answer 1

Это не может быть лучшим ответом выполнения, или даже самый лаконичный, но он может начать вас в правильном пути (fiddle):

<div> 
<table> 
    <tbody> 
     <tr> 
      <th class="title">Title</th> 
      <th class="year">Release Year</th> 
      <th class="director">Director</th> 
     </tr> 
     <tr> 
      <td class="title">Braveheart</br>part 2</td> 
      <td class="year">1992?</td> 
      <td class="director">Mel Gibson?</td> 
     <tr> 
      <td class="title">Some movie with a ridiculously long title. I mean, like two paragraphs for a title, which is ridiculous of course but it proves my point.</td> 
      <td class="year">2015</td> 
      <td class="director">The Great Anton - Director of the year 2012</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

$(document).ready(function(){ 

    function getMaxHeight(e){ 
     var maxHeight = Math.max.apply(null, $(e).map(function() 
      { 
      return $(this).height(); 
      }).get()); 
     return maxHeight; 
    } 


    $('tr').each(function(){ 
     $(this).find('.title').css("height", getMaxHeight('.title')); 
     $(this).find('.year').css("height", getMaxHeight('.year')); 
     $(this).find('.director').css("height", getMaxHeight('.director')); 
    }); 
}); 

Максимальная высота функция пришла из this SO answer.