web-dev-qa-db-ja.com

テーブルの最小高さを強制する方法

this code：

<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
    <tbody>
        <tr valign="top">
            <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
                This is my text that I need in 2 lines
            </td>
        </tr>

        <tr valign="top">
            <td style="font-size:12px;line-height:14px">
                Second Line
            </td>
        </tr>
    </tbody>
</table>

ご覧のとおり、最初のtr/tdは高さ60px（min-height:60px）しかし実際にはそうではありません。

多くの理由から、身長を直接使用することはできません（このコードは、ニュースレターで書式設定されたトローバックオフィスシステムです）。

だから、どうすればtd trought min-heightで全体の高さを取ることができますか？

また、min-height:60px;はtrですが、何も変わりません...

htmlcsshtml-email
29
markzzz

min-heightテーブル要素では機能しません：

CSS 2.1では、表、インライン表、表のセル、表の列、および列グループに対する「最小幅」および「最大幅」の影響は定義されていません。

これはtdとtrにも当てはまると推測できます。

常に機能するはずは、コンテンツをdivにラップし、min-heightに、 this JSFiddle： に示すように

 <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
            <div style="min-height: 60px; background-color: green">
            This is my text that I need in 2 lines
            </div>
        </td>

編集：これはOutlookでは機能しないと言います。

別のアイデア：tdに高さ60ピクセルの画像を配置し、float: left：

<td>
  <img src="..." style="float: left">
</td>
36
Pekka 웃

つかいます <td height="60"> CSSの高さまたは最小高さではない

HTMLメールの場合、テーブルセルを<td height="60">そして、それを最小高さとして扱います。コンテンツが60ピクセルを超える場合、それに応じて拡大します。

17
John

セルにDIVを配置し、代わりにDIVをスタイルします。

11
Diodeus - James MacFarlane

最小高さはテーブルでは機能しません。

要素の高さを特定の範囲に制限すると便利な場合があります。 2つのプロパティがこの機能を提供します。min-height＆max-height

ただし、これらは非置換インライン要素、テーブル列、および列グループでは使用できません。

9
dg90

HTML

<table></table>

CSS

table{
    height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
    min-height:100vh;
}

それは私が常にこの問題を解決する方法です...

3
BBeta

min-heightおよびmin-widthを設定することはできませんが、この同じ効果を達成するためにCSS3を使用できます。

HTML：

<div class="default-table">
    <table>
        <tbody>
            <tr>
                <td>Steve</td>
                <td>Smith</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Jone</td>
                <td>Polanski</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

.default-table table {
    border-collapse: collapse; 
}
.default-table table td {
    padding: 0;
}

.default-table tr:before {
   width: 0px;
   content: '';
   float: left;
   overflow: hidden;
   height: 28px;
   font-size: 0;
}

.default-table {
   overflow:hidden;
}

しかし、tdに崩壊またはパディングがある場合。 .default-tableテーブルからmargin-leftを引いた値を指定する必要があります。

3
Davton

表示ブロックを追加

<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
2
Dave Hogan

display:block;をそのスタイルに追加することにより、この問題を解決しました。

<td style="display:block; min-height:200px;">
1
alamnaryab

私のようなこの投稿を検索して見つけた人のために、2012年の投稿を復活させるかもしれません：

table tr:first-child td:before {
  min-height: 100px;
  display: block;
  content: ""
}
<table border="1">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
0
Taha Paksu

以下は、ピクセル単位の高さに依存しないソリューションです。すべてのメールクライアントで機能します。

<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
    <tr valign="top">
        <td style="font-family:Arial;font-size:12px;line-height:14px;">
            This is my text that I need in 2 lines
        </td>
        <td style="font-family:Arial;font-size:12px;line-height:14px;">
            <br/>&#xfeff;<br/>
        </td>

    </tr>

    <tr valign="top">
        <td style="font-size:12px;line-height:14px">
            Second Line
        </td>
    </tr>
</tbody>

このソリューションは、最初の行の右側に2行の幅ゼロの列を追加することで機能します。 #xfeffを使用します。文字。これは、改行なしのゼロ幅スペースです。

0
Pavel Plachký