Как заставить минимальную высоту на столе

Ответ 1

min-height не работает для элементов таблицы:

В CSS 2.1 влияние "min-width" и "max-width" на таблицы, встроенные таблицы, ячейки таблицы, столбцы столбцов и группы столбцов undefined.

Я могу только предположить, что это относится и к td и tr.

Что должно всегда работать, это обертывание содержимого в div и применение min-height к этому, как показано в этом 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.

Альтернативная идея: поместите изображение высотой 60 пикселей в td и сделайте его float: left:

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

Ответ 2

Используйте <td height="60"> не высоту CSS или минимальную высоту

Для электронной почты HTML установите ячейку таблицы как <td height="60">, и она будет обрабатывать это как минимальную высоту. Если ваш контент превышает 60 пикселей, он будет соответствующим образом расширяться.

Ответ 3

Поместите DIV в ячейку, вместо этого создайте DIV.

Ответ 4

Min-height не работает в таблицах.

Иногда бывает полезно ограничить высоту элементов определенным диапазоном. Два свойства предлагают эту функциональность: min-height и max-height

Но они не могут использоваться для незаменимых встроенных элементов, столбцов таблицы и групп столбцов.

Ответ 5

Добавить блок отображения

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

Ответ 6

Вы не можете установить минимальную высоту и минимальную ширину, но вы можете использовать некоторые 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;
}

но если u имеет коллапс или дополнение в td. Вы должны указывать таблицу .default-table минус margin-left.

Ответ 7

HTML:

<table></table>

CSS:

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

Как я всегда решаю эту проблему...

Ответ 8

Я решил эту проблему, добавив display:block; в свой стиль как

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

Ответ 9

Вот решение, которое работает в Outlook (проверено) и других почтовых клиентах:

<td style="mso-line-height-rule:exactly;line-height:300px;">&nbsp;</td>

Это более чистое, чем использование изображения, которое может негативно повлиять на ваш счет спама и делает то же самое.

Если у вас есть другой контент в <td>, который вы не хотите иметь такую ​​высоту строки, вы можете просто обернуть неразрывное пространство в <span> и установить line-height в этот тег:

<td><span style="mso-line-height-rule:exactly;line-height:300px">&nbsp;</span>**Other content without 300px line-height here**</td>

Причина height или min-height работает с тегами <div>, а не <td>, потому что <td> установлены на display:table-cell и не уважают height так же, как display:block (<div>) элементы.

Ответ 10

Вот решение, которое не зависит от высоты в пикселях. Он работает во всех почтовых клиентах:

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

Решение работает путем добавления столбца нулевой ширины с двумя строками справа от первого. Он использует & #xfeff; символ, который является неотрывным пространством нулевой ширины.

Ответ 11

Возможно, он воскресит пост 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>

Ответ 12

Что я нашел!!!, В таблицах CSS td{height:60px;} работает так же, как CSS td{height:60px;}