Минимальная ширина и максимальная высота для атрибутов таблицы - PullRequest
Новая
       2

Минимальная ширина и максимальная высота для атрибутов таблицы

16 голосов
/ 21 июня 2011

У меня есть таблица, и я хочу определить свойства min-width и max-height. Смотрите пример ниже.

Моя проблема сейчас в том, что браузер не принимает его. Если я определяю его в td, он игнорируется, если я определяю его в элементе div внутри элемента td, содержимое имеет правильную минимальную и максимальную ширину, но таблица все еще имеет тот же размер. (так что свободного места много: /)

Как мне решить эту проблему?

EDIT: Я только что заметил, что проблема, кажется, возникает, только когда таблица находится в полноэкранном режиме. Тем не менее, элемент не должен иметь максимальную ширину больше, чем!

Пример: 

<html>
<head>
    <style type="text/css">
        td {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 100%;
            width: 100%;
        }
        .minfield {
            max-width: 10px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>    
</head>

<body>
    <table class="fullheight">
        <tr>
            <td class="minfield">
                <div class="minfield">
                    <p>hallo</p>
                </div>
            </td>
            <td><p>welt</p></td>
        </tr>
    </table>
</body>
</html>

Ответы [ 3 ]

29 голосов
/ 21 июня 2011

Для ячеек таблицы следует использовать свойство width, так как min-width и max-width для ячеек таблицы не определены. См. спецификацию :

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

Чтобы обеспечить ширину, вы можете попытаться изменить свойство table-layout на «fixed». Спецификация довольно четко описывает алгоритм.

7 голосов
/ 21 мая 2013

Чтобы задать атрибут min-height для td, вы также можете поместить невидимое изображение в td или обернуть его в div. Пример для первого случая: 

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
0 голосов
/ 02 февраля 2013

Я не вижу проблемы с установкой минимальной ширины для таблиц и ячеек. Смотрите это jsFiddle .

HTML: 

<table style="border:solid 1px #000;">
    <tr>
        <td id="cell-one" style="border:solid 1px #000;">
            test 1
        </td>
        <td style="border:solid 1px #000;">
            test 2
        </td>
    </tr>
</table>

и CSS: 

table{width: 90%;}
td#cell-one{min-width: 20%;}

Помните, минимальная ширина зависит от ширины (или максимальной ширины). максимальная ширина переопределяет ширину, а минимальная ширина переопределяет ширину или максимальную ширину. Другими словами, обязательно установите свойство width для родительского элемента, к которому вы применяете min-width: jsFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...