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

テーブルのセルの高さを同じにするために、Google Chromeを使用し、カレンダーの1日を右クリックして、[要素の検査]を選択して検査しました。次に、「calendar-day」のスタイルを次のように変更しました。

/* 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

From：テーブル内のすべての行を同じ高さにするようにするにはどうすればよいですか？ 

<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 に答える