テーブルセルを同じ高さにするにはどうすればよいですか？ http://thomaswd.com/organizer/dashboardをチェックし、カレンダーをクリックしてください。表のセルの高さが異なることがわかります。私はテーブルの上に固定された高さで2行、テーブルの高さは100％です。ブラウザのサイズを変更しても機能しないので、指定したピクセルの高さは必要ありません。これはどうすればいいですか？テーブルセルの高さを同じにする方法
私はGoogle Chromeを使用して検査テーブルセルが同じ高さを持って取得するには、次の
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);
});
};
は、このような関数にあなたのテーブルセルを渡しますカレンダーの日の1つを右クリックして[要素の検査]を選択します。それから私はそうのような「暦日」のスタイリングを変更：
/* shared */
td.calendar-day, td.calendar-day-np {
border-bottom:1px solid #999;
border-right:1px solid #999;
height: 10%;
}
はちょうどあなたが高さになりたい何のstyle.cssで指定します。
「高さ：10％;」のパーセンテージは何ですか？ 10行以上ある場合はどうなりますか？ – Flimm
テーブルセルの高さはテーブルの高さから外れるので、テーブルセルです。 –
から：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>
私は固定された高さを望んでいません –
明らかにテーブルの寸法にスクリプトを適応さ... –
固定高さの代わりにパーセンテージを使用しますか？あなたのテーブルのサイズを変更することから個人的に私はmin-sizeとotherflowを隠して追加します！ –
何がしたいことは、行全体に伝播する最も高いセルの高さであるように見えます。
あなたはjavascriptでこれを行うことができます。
$(#fixedheight tr').each(function(){
eq_el_height($(this).find('td'), "max");
});
は、私の一日を救ったので、魅力のように動作します – mwallisch
！ – SalutonMondo
別の解決策は次のようになります。
var maxHeight = null;
$('#tableId tr').each(function() {
var thisHeight = $(this).height();
if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);
あなたにも相対的な高さを使用することができ、例えば10％ – Horen
はい、しかし、上位2行はピクセルの高さを持っています –