Prácticas de ancho de columna de tabla HTML

Question

¿Qué son buenas prácticas al seleccionar anchos de columna en una tabla? Digamos que tengo cuatro columnas, nombre (ancho variable), descripción (largo contenido de texto), recuento (máximo 3 caracteres), fecha (formato fijo).

¿Cuál sería una buena práctica? Estoy pensando en ancho fijo para describir, contar y ancho (por lo tanto, en realidad también hace que el nombre sea ancho "fijo"). Pero mi verdadera pregunta es cómo seleccionar un tamaño de ancho particular. Por ejemplo, si el formato de fecha es aaaa-MM-dd, hay algún truco para convertir esos 10 caracteres a un ancho que garantice que se muestre bien en cualquier navegador usando cualquier fuente y tamaño de fuente (sin tomar demasiado espacio)?

edición: Con fija quiero decir algo parecido a la "cantidad fija de píxeles en relación con fuente de ancho"

Answer 1

Se puede declarar white-space: nowrap; en todas las celdas que desea estirar todo lo que necesitan sin utilizar espacio extra (nombre, fecha, recuento), y simplemente le da a la celda restante un ancho del 100%. De esta forma, la celda 100% amplia se expandirá tanto como sea posible, sin causar que las otras células colapsen en múltiples líneas.

Answer 2

Si quiere ahorrarse un montón de marcas ...

primer lugar, si por ancho fijo que quiere decir un porcentaje fijo, añada lo siguiente a su hoja de estilos:

.width1 { 
    width: 1%; 
} 
.width2 { 
    width: 2%; 
} 
.width99 { 
    width: 99%; 
} 
.width100 { 
    width: 100%; 
} 

Esto le da la flexibilidad que necesita si decide aplicar un ancho de porcentaje impar para cualquiera de ellos si lo desea, por ejemplo, ancho23 en uno de ellos, ancho 27 en otro.

Ahora esta es la parte inteligente. Con la etiqueta col, puede aplicar anchuras solo una vez en lugar de cada celda. Sé que puede aplicar anchuras a solo la primera fila, y establecerán los anchos para la misma celda en cada dos filas, pero la etiqueta col se puede usar también para establecer otras propiedades. Por ejemplo:

<table class="width100"> 
    <col class="width15" style="background-color: #cccccc;" /> 
    <col class="width65" /> 
    <col class="width10" /> 
    <col class="width10" /> 
    <tr> 
     <td>My Sample Name</td> 
     <td>My Sample Long Description</td> 
     <td>5</td> 
     <td>2010-Oct-08</td> 
    </tr> 
</table> 

generalmente prefiero utilizar esta técnica - pero si se trata de un diseño que va a utilizar en varias tablas (por ejemplo, la tabla de clientes puede ser el mismo diseño que la tabla agentes) entonces lo haré crea una clase para cada columna y establece el ancho, etc. en esa clase. Luego aplicaré la clase relevante a cada celda. Supongo que ambos métodos podrían combinarse: la clase relevante podría aplicarse a la columna relevante, pero el hecho de que las propiedades estén establecidas en un solo lugar (la hoja de estilos) significa que solo tiene que cambiarla en una ubicación.

Espero que esto ayude y que es lo que estás buscando.

Richard