Un usuario preguntó 👇
Hola,
Esto puede ser trivial de la mejor manera.
Mi tabla (#ffffff) tiene un fondo transparente / heredado. El color de fondo de las filas de la tabla cambia a # f8f8f8 en el deslizamiento, solo un poco más oscuro que el blanco. Los únicos otros atributos son las líneas superior e inferior configuradas en # e5e5e5, nuevamente, un poco más oscuro que # f8f8f8.
La razón por la que elegí dos tonos diferentes de gris es que el gris más claro es perfectamente visible en el lienzo a medida que pasa por las capas. Sin embargo, por otro lado, como líneas de 1px, apenas se distinguen del blanco, por lo que elegí un gris más oscuro para ellas.
Ahora mi pregunta es si es posible de alguna manera cambiar el color de las líneas superior e inferior de # e5e5e5 (el gris más oscuro) a # f8f8f8 (el gris más claro) mientras se buscan entre sí , para que el bloque tenga el mismo color, esencialmente «elimine las líneas», al menos visualmente.
Gracias por cualquier consejo o idea.
(@tobiasbg)
Hace 1 año, 9 meses
Hola,
gracias por tu publicación y perdón por las molestias.
Sí, esto debería ser posible. ¿Puede publicar un enlace a la página con la tabla donde ocurre este problema, para que pueda mirar directamente? ¡Gracias!
Saludos, Tobias
(@jfbprivate)
Hace 1 año, 9 meses
Hola Tobias,
Gracias por verlo.
Lamentablemente, no puedo, sin embargo, configurar un ejemplo de SandBox realmente rápido que sería suficiente para mostrar de lo que estoy hablando.
Ahora lo que quiero probar aquí es cambiar el color de la línea superior e inferior al color de fondo del conjunto.
http://hungry-millipede.w6.wpsandbox.pro/table/
Gracias de nuevo.
(@tobiasbg)
Hace 1 año, 9 meses
Hola,
gracias. Por lo general, a algunos CSS les gusta
.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}Eso debería funcionar. Tenga en cuenta que este trabajo no debe limitarse tr elemento.
Saludos, Tobias
(@jfbprivate)
Hace 1 año, 9 meses
Gracias.
Me las arreglé para aplicarlo a mi tabla original, pero solo cambia el borde inferior, el borde superior sigue ahí.
El código que me diste también se comporta de esa manera: solo el borde inferior cambia a rojo.
Tampoco entiendo lo que quiere decir con «Tenga en cuenta que el elemento tr no debería ser un límite para este trabajo». Si elimino los atributos de límite de la siguiente parte del código, también se elimina el primer límite superior.
.tablepress, .tablepress tr, .tablepress tbody td, .tablepress thead th, .tablepress tfoot th {color de fondo: #ffffff; borde superior: 1px sólido # e5e5e5; borde inferior: 1px sólido # e5e5e5; borde izquierdo: ninguno; borde derecho: ninguno; familia tipográfica: Helvetica; tamaño de fuente: 14px; peso de la fuente: más ligero; color: # 4d4d4d; }
¿Me estoy perdiendo algo obvio? Probablemente.
(@jfbprivate)
Hace 1 año, 9 meses
Oh ya veo. El «Tenga en cuenta que el elemento tr para este trabajo no debe ser limitado». – la parte y el «borde superior que no cambia de color» probablemente estén relacionados.
Sin embargo, encontré que funcionaba una vez, y estoy seguro de que no restó valor a los atributos límite de la línea tr. Sin embargo, me pregunto cómo lo hice. Tuve que volver a colocarlo debido a otro problema y no lo guardé. Ahora no puedo reproducirlo.
(@tobiasbg)
Hace 1 año, 9 meses
Hola,
tu podrías intentar
.tablepress tr,
de ese CSS y reubicarlo en un bloque CSS separado con las otras propiedades CSS, no solo el border-top y border-bottom.
Saludos, Tobias
(@jfbprivate)
Hace 1 año, 9 meses
Sí, lo hice, acabo de crear un elemento extra para tr. Todavía nada. Pegué el código en las opciones del plugin y actualicé el sitio. Es posible que desee echar un vistazo.
Estoy seguro de que también hay mucho código innecesario, pero solo estoy en las primeras etapas. Quizás alguna línea extraña esté interfiriendo con el comando. Admito que hoy me cuesta concentrarme. . .
Gracias de nuevo.
(@jfbprivate)
Hace 1 año, 9 meses
Sí y también el enlace está roto. Por alguna razón, la mesa ahora está aquí:
http://hungry-millipede.w6.poopy.life/table/
Caca de vida. Correcto. 😉
(@tobiasbg)
Hace 1 año, 9 meses
Hola,
No estoy muy seguro de lo que está pasando aquí, pero utilizo la versión reducida por completo
.tablepress tbody td {
border-color: #e5e5e5;
}
.tablepress tbody tr:hover td {
border-color: #ff0000;
border-bottom: 1px solid #ff0000;
}parece funcionar para mí.
Saludos, Tobias
(@jfbprivate)
Hace 1 año, 9 meses
Espera, ¿eso significa que el límite superior no tiene ningún atributo? ¿Es así como funcionan los límites de la tabla: solo es necesario el valor del límite inferior? Porque esa es la única parte que realmente no entiendo: «Consecutivo» no parece tener dos límites porque la serie anterior y la siguiente comparten la misma, respectivamente. Es un poco confuso.
Otra cosa: el encabezado de este ejemplo no se ve afectado por el código. El borde inferior del encabezado sigue siendo gris. ¿Puedo agregar una línea a eso también, y eso cambiará el límite superior del encabezado?
Si utilizo este fragmento de código que publicaste, también lo hago funcionar. Sin embargo, cuando lo aplico en mi mesa, ya no funciona.
Probablemente tendré que crear la SEC desde cero y ver hasta qué punto exactamente no funcionará. Esa parece ser la única forma de averiguar qué está causando esto.
Gracias de nuevo.
(@jfbprivate)
Hace 1 año, 9 meses
Ahora hay una inconsistencia en lo que publica:
El primero fue:
.tablepress tr: hover td {borde superior: 1px sólido # ff0000; borde inferior: 1px sólido # ff0000; }
El segundo fue:
.tablepress tbody td {border-color: # e5e5e5; }
.tablepress tbody tr: hover td {border-color: # ff0000; borde inferior: 1px sólido # ff0000; }
Dejó el límite superior en la segunda publicación (todavía funciona), y en lugar de «.tablepress tr: hover td» escribió «.tablepress tbody tr: hover td».
¿Eso tiene algún efecto?
(@jfbprivate)
Hace 1 año, 9 meses
Verá, quiero decir, ambas formas funcionan, con y sin el «borde superior».
Éste:
.tablepress tr: hover td {borde superior: 1px sólido # ff0000; borde inferior: 1px sólido # ff0000; }
Además de esto:
.tablepress tr: hover td {borde inferior: 1px sólido # ff0000; }
Entonces, lo que estoy tratando de entender es si el límite superior de una fila es el límite inferior de la fila anterior o al revés.
(@jfbprivate)
Hace 1 año, 9 meses
Sabes lo que es, no lo recuerdas. No tengo que entenderlo todo. Me funciona ahora, así:
.tablepress tbody td {border-color: # e5e5e5; }
.tablepress .row-hover tr: hover td {background-color: # f8f8f8; }
.tablepress tr: hover td {borde superior: 1px sólido # f8f8f8; borde inferior: 1px sólido # f8f8f8; }
[The only confusing thing remaining: What’s the difference between “.tablepress .row-hover tr:hover td” and “.tablepress tr:hover td”? There seems to be one anyway, because when I copy the border information into the first element (with the “.row-hover”), the first row of the table would jump down by one pixel on hover, which it doesn’t do when I leave it in the second element (without the “.row-hover”).]Para que funcione correctamente, no puedo ingresar ningún valor de borde en «.tablepress tbody td» que no sea «color de borde». Cualquier información adicional solo demuestra que el límite superior no corresponde. Así que lo dejé por completo. De todos modos, no parece ser necesario.
Hasta aquí todo bien. . .
Pero hay una última edición, y mi tema es en parte culpable: quiero habilitar la primera y la última fila de mi tabla deshabilitadas de forma predeterminada. Vi que generalmente existen en los temas regulares de WordPress. ¿Cómo puedo activarlos sin destruir la función anterior nuevamente?
Sí, mis disculpas por el lío y gracias.
Volveré con más preguntas e ideas (y una suscripción sobre ese tema) antes de que esté todo listo y listo.
(@jfbprivate)
Hace 1 año, 9 meses
PD: Creo que sé qué causa el salto de 1px. Me acabo de dar cuenta de que toda la mesa salta hacia abajo con un píxel. Probablemente sea porque espera un límite superior por encima de la primera fila, que no está allí. Lo mismo ocurre con la última fila: salte hacia abajo el botón «Editar» con un solo píxel mientras se voltea. Pero ese límite también falta, solo es visible al pasar el mouse. Así que tengo que habilitarlos de alguna manera.
(@tobiasbg)
Hace 1 año, 9 meses
Hola,
como puede ver, establecer los límites correctos puede ser difícil. La razón es que a menudo se ven afectados por muchas cosas: pruebe el tema CSS, el CSS TablePress predeterminado y luego nuestro «CSS personalizado». Además de eso, hay diferentes formas en que se pueden aplicar los límites (con la idea de dos capas que comparten un borde, etc.)
Es por eso que generalmente es mejor hacer una prueba directa de la página / tabla en cuestión, y tal vez usar las herramientas de desarrollador en el navegador (recomiendo las de Chrome para esto).
Acerca de .row-hover: Esta es una clase CSS utilizada en tablas TablePress que tiene habilitada la función Row Hover Highlight. No es realmente necesario para su pensamiento, pero a veces puede ayudar con la coherencia.
Saludos, Tobias
¿Solucionó tu problema??
0 / 0