html - 水平表格中表格单元格的动态高度

Question

我用了this回答创建一个水平表，因为我有固定数量的水平行，但有 N 个垂直列。这非常有效，但因为 HTML 行实际上是列，单元格之间的高度在显示的行中并不保持一致。

通过将以下内容添加到提供的答案中，我能够确保每一列都适合页面，从而导致文本换行，但行高不一定匹配。

td {
    max-width: 200px;
}

JSFiddle example.

在上面的 fiddle 示例中，如何使带有“Title”的单元格和带有“Braveheart”的单元格与该行中第三个单元格的高度匹配？

提示:正确的答案是不要硬编码前两个单元格的高度，因为我不知道以后添加另一个单元格时它可能有多长。

编辑

我不能使用 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 .