Question

如何让表格单元格高度相同？查看http://thomaswd.com/organizer/dashboard并点击日历。您将看到表格单元格具有不同的高度。我在桌子顶部有2排固定高度，我的桌子高度是100％。我不想要指定的像素高度，因为在调整浏览器大小时这不起作用。我该怎么做？

Answer 1

看起来你想要的是最高的细胞高度在整个行上传播。

您可以使用javascript执行此操作：

var eq_el_height = function(els, min_or_max) {

    els.each(function() {
        $(this).height('auto');
    });

    var m = $(els[0]).height();

    els.each(function() {
        var h = $(this).height();

        if (min_or_max === "max") {
            m = h > m ? h : m;
        } else {
            m = h < m ? h : m;
        }
    });

    els.each(function() {
        $(this).height(m);
    });
};

将表格单元格传递给这样的函数：

        $(#fixedheight tr').each(function(){
            eq_el_height($(this).find('td'), "max");
        });

Answer 2

为了让表格单元具有相同的高度，我使用谷歌浏览器并通过右键单击当天并选择“检查元素”来检查日历上的其中一天。然后我像这样改变了“日历日”的样式：

/* shared */
td.calendar-day, td.calendar-day-np {  
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    height: 10%;
}

只需在style.css中指定您想要的高度。

Answer 3

来自：How can I force all rows in a table to have the same height

<html>
    <head>
        <style type="text/css">
            #fixedheight {
                table-layout: fixed;
            }

            #fixedheight td {
                width: 25%;
            }

            #fixedheight td div {
                height: 20px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <table id="fixedheight">
            <tbody>
            <tr>
                <td><div>content</div></td>
                <td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td>
                <td><div>more content</div></td>
                <td><div>small content</div></td>
                <td><div>enough already</div></td>
            </tr>
            </tbody>
        </table>
    </body>
</html>

Answer 4

另一种解决方案可能是：

var maxHeight = null;
$('#tableId tr').each(function() {
    var thisHeight = $(this).height();
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);

如何让表格单元具有相同的高度

4 个答案: