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

Question

У меня этот код:

<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), но на самом деле это не так.

По многим причинам я не могу напрямую использовать высоту (этот код отформатирован в системе бэк-офиса, в бюллетене).

Итак, как я могу взять всю высоту на минимальной высоте тд тхт?

Также попытался поставить min-height:60px; на tr, но ничего не изменилось ...

Answer 1

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

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

Я могу только предположить, что это относится и к 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.

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

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

Answer 2

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

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

Answer 3

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

Answer 4

Минимальная высота не работает на столах.

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

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

Answer 5

HTML:

<table></table>

CSS:

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

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

Answer 6

Вы не можете установить минимальная высота и минимальная ширина , но вы можете использовать некоторые CSS3 для достижения этого эффекта.*

<div class="default-table">
    <table>
        <tbody>
            <tr>
                <td>Steve</td>
                <td>Smith</td>
                <td>stevesmith@gmail.com</td>
            </tr>
            <tr>
                <td>Jone</td>
                <td>Polanski</td>
                <td>jonep@gmail.com</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;
}

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

Answer 7

Вот решение, которое работает в 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>) элементы.

Answer 8

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

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

Answer 9

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

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

Answer 10

Это может быть возрождение поста 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>