Чи можу я використовувати міні-висоту для таблиці, tr чи td?


120

Я намагаюся показати деякі деталі отримання в таблиці.

Я хочу, щоб стіл мав висоту хвилини для показу продуктів. Тож якщо є лише один продукт, то на столі буде принаймні трохи пробілу. З іншого боку, якщо є 5 і більше продуктів, це не буде таким порожнім місцем.

Я спробував з цим css:

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

Але це не працює.

Заздалегідь спасибі.


1
Було б корисно, якщо ви створите загадку для нас, щоб спробувати ваш код.
mavrosxristoforos

Відповіді:


39

Це не приємне рішення, але спробуйте так:

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

і встановіть діви на мінімальну висоту:

div {
    min-height: 300px;
}

Сподіваюсь, що це те, що ти хочеш ...


2
@SackySan вам потрібно дати класи divs, а потім зробити це правило застосовним лише до цього класу
Zachary Weixelbaum

Це зовсім не приємно!
Ахмад

408

heightдля tdтаких робіт min-height:

td {
  height: 100px;
}

замість

td {
  min-height: 100px;
}

Осередки таблиці будуть рости, коли вміст не підходить.

https://jsfiddle.net/qz70zps4/


2
У моєму браузері Google Chrome (версія 47.0.2526.106 м) працює на Windows 7, я виявив , що установка heightз tdфактично обробляється як paddingзверху і знизу, що може ввести деяку проблему компонування , як ви думаєте , що це дійсно heightпростір. Він не відображається як стиль або як обчислюваний стиль в інструментах для розробників, але коли ви кладете курсор миші на перевірений елемент html, він відображається на екрані.
Феліпп Олівейра

але питання було на мінімальній висоті, яка не працює! що станеться, якщо у вас довгий текст і потрібен інший рядок з висотою, він зіпсується
CMS

як, наприклад, @CMS, він запитав про це min-heightне так, heightяк @frank пояснює, що нижче він поводиться так само table td. Тож, можливо, це потребує трохи кращого пояснення.
dft

3
Це, безумовно, краща відповідь, ніж прийнята.
Jinjubei

2
Ця відповідь щойно врятувала мені потенційно години роботи, повинна бути відповіддю.
Люк Прінг

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 вплив "мінімальної висоти" та "максимальної висоти" на таблиці, вбудовані таблиці, комірки таблиці, рядки таблиці та групи рядків не визначено.

Тому спробуйте загортати вміст у 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

Просто використовуйте 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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.