Чи можу я використовувати міні-висоту для таблиці, 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.