Colonnes de table, définissant les largeurs min et max avec css

Question

Je voudrais avoir une table qui dans les colonnes peut s'étirer mais j'ai un petit problème avec la largeur min et max en CSS.

Il semble également qu’il existe des réponses contradictoires sur la façon dont cela fonctionne:

• largeur min/max devrait fonctionner: Empêcher le texte de chevaucher la table td width
• largeur min/max non prise en charge: Min-width et max-height pour les attributs de table

J'aimerais avoir le suivant

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

Y a-t-il un moyen d'y parvenir sans javascript (c'est-à-dire un étirement contraint des colonnes avec une table)?

• J'ai seulement besoin de ça pour travailler avec CSS3 + HTML5
• un jsfiddle avec des choses pas en expansion: http://jsfiddle.net/4b3RZ/10/
• si je ne fixe que min-width sur les colonnes, j’obtiens un étirement proportionnel: http://jsfiddle.net/4b3RZ/8/

vous trouverez ci-dessous un tableau de ce qui est rendu pour certaines configurations css différentes:

Answer 1

Les tables fonctionnent différemment; parfois contre-intuitivement.

La solution consiste à utiliser width sur les cellules du tableau au lieu de max-width.

Bien que cela puisse sembler comme dans ce cas, les cellules ne seront pas réduites en dessous de la largeur donnée, elles le seront en réalité.
Sans restrictions sur c, si vous donnez au tableau une largeur de 70 pixels, les largeurs de a, b et c seront respectivement de 16, 42 et 12 pixels.
Avec une largeur de tableau de 400 pixels, ils se comportent comme vous le souhaitez dans la grille ci-dessus.
C’est uniquement lorsque vous essayez de donner à la table une taille trop petite (inférieure à a.min + b.min + le contenu de C) qu’elle échouera: la table elle-même sera plus large que celle spécifiée.

J'ai créé un extrait à partir de votre violon, dans lequel j'ai supprimé toutes les bordures, les rembourrages et l'espacement des bordures afin que vous puissiez mesurer les largeurs avec plus de précision.

table {
  width: 70px;
}

table, tbody, tr, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}

.a, .c {
  background-color: red;
}

.b {
  background-color: #F77;
}

.a {
  min-width: 10px;
  width: 20px;
  max-width: 20px;
}

.b {
  min-width: 40px;
  width: 45px;
  max-width: 45px;
}

.c {}

<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
</table>