Min-width et max-height pour les attributs de table

J'ai un tableau et je veux définir le min-width et max-height propriétés. Voir l'exemple ci-dessous.

Mon problème maintenant c'est que le navigateur ne prend pas. Si je le définir sur td elle est ignorée, si je le définir dans un div élément à l'intérieur d'un td élément, le contenu a le droit de min et max de la largeur, mais la table a toujours la même taille. (il y a donc beaucoup d'espace libre :/)

Comment puis-je résoudre ce problème?

EDIT:
Je viens de remarquer que le problème semble se produire uniquement lorsque la table est en mode plein écran. Néanmoins, un élément ne devrait pas avoir plus que le max-width de!

Exemple:

<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>

source d'informationauteur Stefan

  1. 27

    Pour les cellules du tableau de la largeur de la propriété doit être utilisé, comme le 'min-width' et 'max-width' est pas défini pour les cellules de tableau. Voir la spécification:

    "En CSS 2.1, l'effet de 'min-width' et 'max-width' sur les tables en ligne de tableaux, cellules de tableau, les colonnes de la table, et les groupes de colonnes n'est pas défini."

    Pour faire respecter la largeur, vous pouvez essayer de changer le table-layout à la propriété "fixe". La spécification décrit l'algorithme assez clairement.

  2. 5

    À force min-hauteur de l'attribut de td, vous pouvez également mettre invisible de l'image en td, ou enveloppez-vous de td en div.
    Exemple pour le premier cas:

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

    Je ne vois pas le problème avec le réglage min-width pour les tables et les cellules. Voir ce 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>

    et CSS:

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

    Rappelez-vous, min-largeur dépend de la largeur (ou max-width). max-width remplace width et min-width remplace la largeur ou max-width. En d'autres termes, assurez-vous de régler la largeur de la propriété sur le parent de l'élément d'appliquer min-largeur: jsFiddle