para - Columnas de tabla, que establecen tanto el ancho mínimo como el máximo con css

tablas en html ejemplos

Question

Me gustaría tener una mesa que en las columnas se pueda estirar, pero estoy teniendo un pequeño problema con el ancho mínimo y máximo en CSS.

También parece que hay algunas respuestas contradictorias sobre cómo funciona esto:

• El ancho mínimo / máximo debería funcionar: evitar el texto de la tabla de superposición td ancho
• el ancho mínimo / máximo no se admite: ancho mínimo y altura máxima para los atributos de tabla

Me gustaría tener lo siguiente

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>

¿Hay alguna forma de lograr esto sin javascript (es decir, estiramiento limitado de columnas con una tabla)?

• Solo necesito esto para trabajar con CSS3 + HTML5
• un jsfiddle con cosas que no se expanden: http://jsfiddle.net/4b3RZ/10/
• si establezco solo min-width en las columnas obtengo un tramo proporcional: http://jsfiddle.net/4b3RZ/8/

a continuación se muestra una tabla de lo que realmente se procesa para algunas configuraciones de CSS diferentes:

Answer 1

Las tablas funcionan de manera diferente; a veces contraintuitivamente.

La solución es usar width en las celdas de la tabla en lugar de max-width .

Aunque puede parecer que en ese caso las celdas no se contraerán por debajo del ancho dado, lo harán en realidad.
sin restricciones en c, si le da a la tabla un ancho de 70px, los anchos de a, byc saldrán como 16, 42 y 12 píxeles, respectivamente.
Con un ancho de tabla de 400 píxeles, se comportan como usted dice que espera en su cuadrícula de arriba.
Solo cuando intente dar a la tabla un tamaño demasiado pequeño (más pequeño que a.min + b.min + el contenido de C) fallará: entonces la tabla en sí será más ancha que la especificada.

Hice un fragmento basado en tu violín, en el que eliminé todos los bordes y rellenos y el espacio entre los bordes, para que puedas medir los anchos con mayor precisión.

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>