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

【问题标题】：How to get table cells to have equal height如何让表格单元格具有相同的高度
【发布时间】：2017-05-02 22:26:38
【问题描述】：

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

【问题讨论】：

您也可以使用相对高度，例如10%
是的，但前 2 行有像素高度

标签： html css css-tables

【解决方案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");
        });

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

height: 10%; 的百分比是多少？如果我有十多行怎么办？
因为它是一个表格单元格，所以高度会超出表格的高度。

【解决方案3】：

另一种解决方案可能是：

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

【讨论】：

【解决方案4】：

发件人：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>

【讨论】：

我不想要固定高度
然后使用百分比而不是固定高度？从个人调整你的桌子大小我会添加一个最小尺寸和隐藏的其他流程！
我知道，但我的问题是顶部有 2 行固定高度，百分比仍然有效吗？