table、tr、tdにmin-heightを使用できますか？

120

受信の詳細を表に表示しようとしています。

そのテーブルには、商品を表示するための最小の高さが必要です。したがって、製品が1つしかない場合、テーブルの最後には少なくともいくらかの空白があります。一方、商品が5つ以上ある場合、その空のスペースにはなりません。

私はこのCSSを試してみました：

table,td,tr{
  min-height:300px;
}

しかし、それは機能していません。

前もって感謝します。

html css

— キルカッジ
ソース

1

私たちがあなたのコードを試すためのフィドルを作成すると役立つでしょう。

— mavrosxristoforos 2013年

39

それは良い解決策ではありませんが、次のように試してください：

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

divをmin-heightに設定します。

div {
    min-height: 300px;
}

これがあなたが望むものであることを願っています...

— アーノルドザック
ソース

2

@SackySanは、divクラスを指定し、このルールをそのクラスにのみ適用する必要があります

— Zachary Weixelbaum

408

heightのtdような作品のためにmin-height：

td {
  height: 100px;
}

の代わりに

td {
  min-height: 100px;
}

コンテンツが収まらない場合、表のセルは大きくなります。

https://jsfiddle.net/qz70zps4/

— アウレリアーノ・ファー・スアウ
ソース

2

Windows 7で実行しているGoogle Chrome（バージョン47.0.2526.106 m）heightで、td実際のの設定がpadding上部と下部として処理されることがわかりましたheight。開発ツールではスタイルまたは計算されたスタイルとしては表示されませんが、検査されたhtml要素の上にマウスを置くと、画面に表示されます。

— Felypp Oliveira

しかし、問題は機能しないmin-heightに関するものでした！長いテキストがあり、高さのある別の行が必要な場合、混乱するでしょう

— CMS

@CMSが言ったように、彼は尋ねた程度min-heightではないheight@frankは、それがために同じ動作をしますの下に説明しているようしかしtable td。だから多分これは少し良い説明が必要です。

— dft d'

3

これは間違いなく受け入れられたものより良い答えです。

— 晋ジュベイ16

2

この答えは私に潜在的に何時間もの作業を節約させてくれました、答えであるはずです。

— ルークプリング2017

28

なしの解法divは、の::after最初のtd行のような疑似要素を使用しmin-heightます。HTMLをきれいに保存します。

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

— アレックスオメルニッキー
ソース

13

CSS 2.1では、テーブル、インラインテーブル、テーブルセル、テーブル行、および行グループに対する「min-height」および「max-height」の影響は定義されていません。

したがって、コンテンツをdivでラップして、divにmin-height jsFiddleをここで指定してください

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

— ソビンオーガスティン
ソース

5

style = "height：100px;"を設定した場合 tdにtdがそれよりもセルを拡大するコンテンツを持っている場合、tdの最小の高さは必要ありません。

— 率直
ソース

0

テーブルとテーブルセルはこのmin-heightプロパティを使用しませんheight。コンテンツを拡大するとテーブルが拡大するので、設定すると最小高さが設定されます。

— アグドンド
ソース

-1

テーブル行のセルの1つにmin-heightのcssエントリを使用するだけです。古いブラウザでも動作します。

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

— サッキー・サン
ソース