Question

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

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

td {
    max-width: 200px;
}

JSFiddle example.

在上面的小提琴示例中，如何使用＆＃34;标题＆＃34;和＆＃34; Braveheart＆＃34;匹配该行中第三个单元格的高度？

提示：正确的答案不是硬编码前两个单元格的高度，因为我不知道以后添加另一个单元格的时间长度。

修改

我无法使用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。

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

1 个答案: