Cómo Crear una Tabla con Columna Fija - HTML y CSS
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- 🎓 Cursos de diseño: franciscoamk.c...
:::
¡¡¡Nuevos videos todas las semanas!!!
:::
ACERCA DE MÍ
Soy Francisco Aguilera G., creativo enfocado principalmente en el diseño web. Diseño y desarrollo sitios web para clientes y paralelamente me dedico a enseñar sobre diseño web a través de videos, artículos, tutoriales y cursos en línea.
:::
Suscríbete: franciscoamk.co...
Cursos: franciscoamk.co...
Diseños: / franciscoamk
![ฮักเทื่อสุดท้าย - บอย ศิริชัย [OFFICIAL MV]](http://i.ytimg.com/vi/-1PoPoQ-B-k/mqdefault.jpg)
No le tenia mucha fe a este tipo de videos explicando soluciones pero me cambiaste la mente. Buena explicación y solución simple para poder implementar en cualquier proyecto, justo lo que buscaba.
Gracias llevaba mucho buscando esto exactamente así sin un framework o plugin y lo pude aplicar de manera horizontal, gracias excelente explicación
¡¡Broooother!!
Déjame decir algo. "Eres un CRACK" Joder.👏👏👏. Ya tienes un nuevo Seguidor.
Toma tu like buen hombre.👍😎
Muchas gracias :)
Excelente video, me ha servido demasiado!!
Esto es exactamente lo que necesitaba! Muchas gracias por el tutorial!
Sin duda un gran video FUNCIONAL
Yo lo aplique en wordpress en un bloque HTML y FUNCIONA EXCELENTE
lo que buscaba super, gracias por su tiempo en dejar esta valiosa enseñanza
Muchas gracias. Me ha ido genial!
Hola Francisco, excelentes tus tutoriales, quería pedirte un favor, el otro día me pidieron hacer uno de esos mail en donde lo abres y se ve inmediatamente lo que trae, no hay un archivo adjunto, generalmente lo ocupan los supermercados, etc, es como una página web que se refleja en el mail, consulta, cómo se hace eso, hay algún tutorial impreso o video para aprender como hacerlo? muchas gracias, saludos desde Quilpué.
Muy buen tutorial
Muchas Gracias. Ha explicado muy bien el posicionamiento fijo de las columnas y es algo que venía buscando hace tiempo. Pero me surge una pregunta. Estoy realizando un crud y necesitaría que también la última columna, donde tengo dos botones, fuese también fija, ¿ sería correcto utilizar position:sticky y right:0; para esta última columna?
EXCELENTE TUTORIAL. GRACIAS
Gracias :)
Excelente,
Explicas super claro , muy contento con lo aprendido
Genial, gracias
Reamente muy bueno... Gracias por tus videos
Gracias Guillermo
muchas gracias, realmente lo necesitaba...
Excelente, muchisímas gracias!!
:)
me has ayudado un monton!! Sos unCrack
Genial :)
Muy bueno, excelente. Yo que uso estadísticas y aunque tengo algo parecido en mi web, es bueno saber como se hace desde cero para inventar nuevas cosas.
😊
Exelente información...100 puntos
🤗
Francisco, te sugiero lo siguiente para mejorar la aplicación de bordes a las columnas con excepción de la última. Al final tendrás solo dos selectores en vez de cuatro: .table-cebra th:not(:last-child) y .table-cebra td:not(:last-child).
Toda la razón, después que grabé el video también se me ocurrieron un par de cosas extra para optimizar el CSS, pero en fin, ya estaba grabado XD
Gran aporte muchas gracias... todo me funciona perfecto, tengo una duda nada más cuando muevo el scroll los textos de las columnas que se mueven normal se ocultan por que le pusimos fondo blanco a las celdas!! pero cuando añado al texto estilos con javascript ya no me funciona, es decir ya no se oculta y al momento de hacer scroll los textos estan sobre el fondo... no se si me deje entender! porfa si falta añadir a esos estilos que añado algo más... le agradeceria muchisimo!!!!
Excelente video, pero necesito un poco de ayuda jaja.
Se puede hacer que la columna quede fija para cuando se mueve a la izquierda y para cuando se haga scroll hacia abajo? mi problema es que la columna fija al hacer el scroll se posiciona por debajo de las filas, por ende no se ve el encabezado de la columna. Ejemplo. Columna 2 al hacer scroll hacia abajo se tapa por el contenido 2. Lo que necesito es que se pueda hacer scroll hacia abajo y hacia los costados. Que Columna 2 siempre quede fija al mover hacia los lados y cuando hago scroll hacia abajo sigan apareciendo todas las columnas.
Gracias.
Excelente man, no lo hice exactamente como tu, pero me diste una super idea, justo lo que andaba buscando :D
De eso se tratan estos videos, de plantar la semilla y regarla con tu creatividad :)
Sabes que en IE no me funcionó :(
Muy muy muy buen aporte..
Gracias :)
Bien explicado, gracias.
Gracias :)
Hola, gracias por el tutorial. Pregunta: hay forma de que una tabla se vea vertical?? o sea cabecera como primer columna y el resto también como columna, quedando en vertical. Quería practicar a hacer una tabla de comparaciones, pero no queda bien la vista de una tabla en horizontal. Gracias.
muy buen video soy estudiante y estoy desarrollando un proyecto de una tabla de cabecera fija con conexión a myslq que en la tabla muestre las consultas a my BD y pues constantemente al agregar nuevos registros actualiza el tamaño vertical de la tabla asi que les comparto mi archivo php-html y mi css:
#
Nombre
Correo
Telefono
Comentario
fecha
aqui el codigo en CSS
nota este css es para table con cabecera fija
body{
margin: 0;
}
*{
box-sizing: border-box;
}
.page-container{
max-height:100%;
max-width:70%;
margin:2rem auto;
}
.table-cebra{
border-left:solid 1px #ccc;
border-spacing: 0;
}
.table-cebra thead tr{
background-color: darkblue;
color:white;
}
.table-cebra th,
.table-cebra td{
border-right: 1px solid #ccc;
min-width: 150px;
padding: 0.5rem;
text-align: left;
}
.table-cebra th :last-child,
.table-cebra td :last-child{
border-right:0;
}
tr:nth-child(even){
background-color: #ddd;
}
tr:hover td{
background-color: #05C0DE;
}
.table-cebra tbody td{
border-bottom: 1px solid #ccc;
}
.table-container{
max-height: 400px;
max-width: 100%;
overflow-y:scroll;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 3%;
}
.table-cebra .stiky{
position: sticky;
top:0;
}
.table-cebra thead tr .stiky{
background-color: darkblue;
border-bottom: 1px solid black;}
quiero inmovilizar las 2 o tres primeras columnas, como seria?
Vine buscando cobre y encontré oro
Honestamente vine buscando otra cosa pero esto me sirvió demasiado, gran trabajo
Hola!! Te hago una consulta, hay alguna forma de acceder al evento de scroll horizontal de la tabla? Porque necesito agregar un eventListener para que dos tablas se muevan juntas al hacer scroll en una. Gracias!!
Hola, ante que nada te quiero felicitar por tan excelente video, y si supongamos quiero crear no solo la columna fija si no también el encabezado es lo mismo? Pero con el overflow-y ?
Para el encabezado lo ideal es usar position sticky.
Hola Ami me pasa que al cargar un href desde cualquier registro , el scroll se mueve al inicio y es tediosos para el usuario
me re sirvio, muchas gracias!!!!
Silvia Norabuena Rivasplata genial :)
gracias! me sirvio de mucho. like
Genial :)
hola Francisco, gracias por los vídeos me han ayudado mucho soy estudiante. Podrías hacer un vídeo de como llenar una tabla mediante PHP HTML y CSS totalmente responsive. y que puedas filtrar a través de selects. gracias.
No creo que vaya a meterme al mundo de php
@@FranciscoAMK y podrías hacer que un producto se vea tipo mercado libre llevo unos días probando distintas formas pero no me sale. gracias
Muy buen video Franc. Te quiero hacer una consulta. Se puede dejar la barra de desplazamiento horizontal siempre visible aunque no hagas scroll???
No estoy seguro, creo que eso depende del navegador. Chrome en mac por ejemplo oculta las barras de desplazamiento.
Pero debe haber alguna pseudo clase para eso.
tendrás algo para fijar el encabezado de la primera fila, gracias de antemano
Muchas gracias Crack
🤘
Exelente tus videos, quería saber como hago para dimensionar cada columna de manera distinta. Gracias
Yo suelo crear diferentes clases (Small, Medium, Large) y luego aplicarlas a las columnas que corresponda y así definir los anchos.
@@FranciscoAMK Gracias amigo, pero e intentado y no me funciona, si fueras tan amable de enviarme un ejemplito
Muy bueno y tengo preguntas, se puede hacer lo mismo con la cabecera de la tabla?
Sip, aunque en ese caso es más fácil. Solo le aplicas la propiedad position: sticky
Holis, me sirvio mucho su video Gracias, pero lo quise hacer con dos columnas fijas y la cabecera fija con scroll (x,y), como le puedo hacer para que me respete tanto como cabecera y columna fija??
No tengo una respuesta corta para eso, hay que probar aplicando el position. sticky en los elementos apropiados
me ayudo tu ejemplo, pero estoy trabajando con 4 columnas, el problema que tengo es que cuando las muevo se ocultan una tras otra quisiera ayuda para que no me suceda eso, ya intente con display
Muchas gracias. Puedes dejar el código por favor 👉 Html y Css
Estimado con este procedimiento se pude fijar por ejemplo 2 columnas a la derecha y una a la izquierda?
Mauricio Serrano Zarco hay que probar nomás
como puedo hacer de que una columna se mantenga siempre ancho fijo ? el tester introdujo muchas letras pegada algo asi hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh y cuando hizo eso se daño la tabla se expandió la columna su ancho y como podemos evitarlo ???
Al ejemplo trabajado en el video, que le agregaría para que la cabecera esté fija?
Un position sticky y un top 0
se puede hacer lo mismo con las filas fijas?
Sip
Ayuda! A mi tabla se le esconden los bordes :c queda una especie de rendija entre las celdas que tienen stickys y puedes ver cómo lo que no está estático va pasando por detrás o por debajo :c Alguien sabe cómo puedo arreglarlo?
hola, buen video ¿como hago si quiero dejar 2 o mas columnas fijas?
Creo que en la segunda parte del video de explica
Hola excelente video, pero ¿Qué pasa si quiero una fila tomando tu ejemplo tenga 12 columnas y el resto de filas con 10 ?
Tendrías que hacer un colspan en alguna de las columnas para que ocupen dos espacios en lugar de uno.
hola, será que puedas subir un video para crear una tabla con cierta cantidad de filas de cabeceras y columnas fijas?
Lo acabo de hacer... pero me quedan detallitos de pixeles con los bordes
Aplícale un border-collapse: collapse
Cuando deslizo se me oculta el borde derecho de la columna fija...
Prueba poner el borde en el contenedor.
@@FranciscoAMK El efecto que noto es que lo que se desplaza pasa por debajo del td fijo y pasa por encima del borde del td
Hola
Exelente video, me encantó
pero cómo podría aplicar columna fija a más de 1?
Ya que cuando hago scroll, las columnas se meten una detras de otra
Asi como si fueran cartas
Si mi memoria no falla en la segunda parte del video se explica.
@@FranciscoAMK Ya lo arregle, muchas gracias
@@josutovacpp5161 que hiciste para agregar mas de 1 columna?
@@josutovacpp5161Podrías decirme como le hiciste? Soy nueva en esto y no logro hacer que las dos se queden fijas, me pasa lo que mencionaste primero:(
@@Maruchan05_ Hola 👋, cómo es tu código para ayudarte
y como puedo dejar fijo el primer tr de mi tbody?
position: sticky
top: 0
De hecho lo tengo y no me funciona
Tengo mi header fijo y quiero fijar el primer tr del tbody pero no lo deja fijo
@@luisalbertogomezarreola7357 En teoría debiera funcionar, tendría que ver el codigo para opinar mejor
Funciona en firefox pero no en Chrome :( alguna idea?
Sigue usando firefox... jejeje
La verdad es que no sé lo que puede ser pues cómo ves en el video yo hice las pruebas en chrome.
Mejor hacer una tabla responsive jeje
Excelente vídeo, pero su rostro interrumpe al mire el código css
Ups!