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

У меня есть таблица, и я хочу определить свойства 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>

Ответ 1

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

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

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

Ответ 2

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

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

Ответ 3

Я не вижу проблемы с установкой минимальной ширины для таблиц и ячеек. Смотрите 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%;}

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