7

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

4

4 回答 4

6

看起来您想要的是最高单元格的高度在整个行中传播。

您可以使用 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");
        });
于 2013-03-13T23:13:36.077 回答
3

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

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

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

于 2013-03-13T23:19:20.667 回答
2

另一种解决方案可能是：

var maxHeight = null;
$('#tableId tr').each(function() {
    var thisHeight = $(this).height();
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);
于 2017-05-02T14:26:38.183 回答
1

来自：如何强制表格中的所有行具有相同的高度 

<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>
于 2013-03-13T22:47:34.753 回答