Dynamic height for table cell in horizontal table

Question

I used this answer to create a horizontal table as i have a fixed amount of horizontal rows but N number of vertical columns. This works really well but because the HTML rows are actually columns, the height between cells does not stay consistent in the displayed rows.

By adding the following to the answer provided, I'm able to ensure each column fits on the page, causing text wrap to occur, but then the rows height don't necessarily match.

td {
    max-width: 200px;
}

JSFiddle example.

In the fiddle example above, how do I make the cell with "Title" and the cell with "Braveheart" match the height of the third cell in that row?

Hint: the correct answer is not to hard code the height of the first two cells, since I have no idea how long another cell may be when it is added later.

EDIT

I can't use JavaScript as the html never hits anything client side. It's rendered and then passed into a PDF creation utility.

Answer 1

This may not be the best performing answer, or even the most concise, but it could start you in the right path (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'));
   });
});

The max height function came from this SO answer.