Hola,
Nuestro comparador se abre mediante una "pop-up" y se muestra una tabla. Nos gustaría modificar las líneas de esa tabla:
Y que quedasen con un efecto discontinuo como la tabla de la siguiente página: https://www.oracdecor.com/es_es/catalog/product_compare/index/uenc/aHR0cHM6Ly93d3cub3JhY2RlY29yLmNvbS9lc19lcy9jdXN0b21lci9zZWN0aW9uL2xvYWQvP3NlY3Rpb25zPWNvbXBhcmUtcHJvZHVjdHMsbWVzc2FnZXMmZm9yY2VfbmV3X3NlY3Rpb25fdGltZXN0YW1wPXRydWUmXz0xNjIzODgxOTUxNjQ0/
¿Cómo podríamos hacerlo?
Muchas gracias por vuestra ayuda.
Contenido solo visible a usuarios registrados
Por cierto, nos gusta mucho el comparador de esa página que mencionamos, aunque parece que no utilizan wordpress.
¿Creéis que sería posible replicar exactamente ese comparador en nuestra web con algún plugin o de alguna forma?
Apreciamos vuestra ayuda.
Hola Alba,
Para personalizar los border de tu tabla de forma similar a la referencia te dejo el siguiente codigo CSS
.br_new_compare .br_right_table thead tr td, .br_new_compare .br_right_table thead tr th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_right_table td {
border-left: 2px dashed #f4f4f4 !important;
border-top: 2px dashed #f4f4f4 !important;
}
Con respecto a tu segunda consulta pues el sitio al parecer esta es bajo magento por lo que hallar un plugin que haga algo similar es una solicitud muy amplia sin embargo el método que utilizas actualmente es bastante similar solo le falta estilos, te recuerdo que por esta vía podemos es orientarte y apoyarte de manera puntual en lo que necesites pero si requieres algo mas complejo y a medida puedo recomendarte a nuestros colaboradores que con gusto podrán ayudarte a elaborar lo que deseas.
Saludos!
@bruno-vichetti Wow, queda súper bien!
Muchas gracias.
Aunque también nos gustaría que la primera fila y columna tuvieran unas líneas similares aunque resaltándolas un poco más para diferenciarlas:
¿Nos podrías facilitar otro código para esa parte?
Gracias de nuevo.
Hola Alba,
Vamos a modificar el código anteriormente compartido
.br_new_compare .br_right_table thead tr td, .br_new_compare .br_right_table thead tr th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_right_table td {
border-left: 2px dashed #f4f4f4 !important;
border-top: 2px dashed #f4f4f4 !important;
}
.br_top_table table th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_left_table tr, .br_new_compare .br_right_table tr {
border-top: 2px dashed #f4f4f4;
}
Saludos
Que tal Alba,
Un gusto poder ayudarte, cualquier otra consulta estaremos atentos.
Saludos