Hacemos análisis independientes de los productos que recomendamos. Algunos enlaces del artículo son afiliados: pueden generar un beneficio a algoentremanos.com. Saber más.

Cómo crear tablas HTML con columnas de ancho fijo gracias a CSS

No me gusta utilizar tablas HTML en mis páginas web… Pero hay momentos en que no queda otro remedio. Como es lógico, intento darles formato mediante CSS en mi hoja de estilos, pero siempre había algo que me volvía loco… ¡El ancho de las columnas no se quedaba fijo!

El navegador, si no le indicas lo contrario, hace lo que le da la gana y normalmente la última columna no tiene el mismo ancho que las demás (por lo menos en mi caso). ¿Cómo podemos darle un ancho fijo a las columnas de una tabla con CSS? Fácil, muy fácil…

Tablas con columnas de ancho fijo gracias a CSS

Simplemente, tienes que añadir al código CSS de tu tabla la siguiente línea:

table-layout: fixed;

O si lo prefieres, puedes añadir directamente en el código de la tabla en HTML lo siguiente:

style=’table-layout:fixed’;

Y todo solucionado. Funciona a las mil maravillas.

Celdas de tabla de ancho fijo en WordPress

¡Ojo! Si estás usando WordPress, el asunto es todavía más sencillo. Solo tiene que añadir url bloque de la tabla. Luego vas a ajustes y seleccionas: Celdas de tabla de ancho fijo (lo puedes ver en la imagen):

Bloque de tabla en WordPress con celdas de tabla de ancho fijo

Con esto consigues que se añada al código HTML lo siguiente: class=»has-fixed-layout», la orden que le damos al código para que las celdas tengan el ancho fijo. Como en la tabla siguiente:

Prueba de celdas de ancho fijo en WordPressFunciona de manera sencilla
Foto del autor

Ivan Benito

Apasionado de la lectura y los viajes, experto en tecnología e informática y fan de la privacidad online. Desde el año 2007 me he dedicado al SEO, a escribir y a crear páginas web con WordPress sobre todo tipo de temáticas. Si tienes alguna duda y necesitas ayuda... ¡Pregúntame!

Si tienes preguntas, quieres que hagamos una review de una app, programa o producto, simplemente mándanos un e-mail mediante nuestro formulario de contacto. Te contestaremos en el menor tiempo posible. ¡Muchas gracias y salU2! Algoentremanos realiza reviews de manera profesional y en muchas ocasiones recibimos compensación de las compañías cuyos productos revisamos. Probamos cada producto a fondo y otorgamos altas calificaciones solo a los mejores. La propiedad de Algoentremanos.com es independiente y las opiniones expresadas aquí son solo nuestras. Saber más.

4 comentarios en «Cómo crear tablas HTML con columnas de ancho fijo gracias a CSS»

  1. hola amigo este es la codificación que estoy haciendo el problema es que no me permite centrar la tabla?.
    alguien me puede ayudar

    echo »
    AÑO DEL DIALOGO Y LA RECONCILIACIÓN NACIONAL«;
    echo «EL QUE SUSCRIBE, SECRETARIO ACADEMICO DEL INSTITUTO DE EDUCACION SUPERIOR TECNOLOGICO PUBLICO CESAR AUGUSTO GUARDIA MAYORGA DE CORACORA, otroga la presente:»;
    echo «CONSTANCIA DE NOTAS«;

    Responder

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.