Saltar al contenido

Tablas Comparativas Responsive

agosto 7, 2019
tabla comparativa responsive

Venimos a ti con una «pepita de oro puro». Y no exagero, otros plugins o páginas web cobran hasta 100€ y consiguen los mismos resultados que te compartiremos ahora.

Hemos trabajado con Juan Bravo, para conseguir resultados esperados que garanticen tu satisfacción y te ayuden a «vender más». Estoy seguro que te van a gustar las tablas comparativas responsive. Comprobado y funcionando en la versión 2.3.2

Esta solución se divide en 2 partes, el html y el css. El uno es la estructura y contenido de la tabla. Mientras que CSS te permitirá modificar el aspecto visual de la tabla.

Código Html Tablas Comparativas

Desde el principio del proyecto nos preocupaba mucho la versatilidad y facilidad a la hora de crear las tablas.

Y sin duda fue un reto identificar la vía adecuada para compartir contigo. Por ello, creamos este archivo en excel Plantilla tablas responsive (Descargar Plantilla Tablas) que seguro amarás.

Es bastante intuitivo, pero si necesitas ayuda puedes revisar el video, ahi explico lo sencillo que es conseguir resultados rápido. Si, aún así crees que necesitas ayuda, pues escríbeme.

¿Qué te parece que hayamos utilizado una plantilla en excel para construir la tabla?

Código CSS Tablas Comparativas

Te dejo el código CSS con el que conseguirás los resultados que pudiste apreciar en el video:

.input, .label, .tabs{
display: none;}
.normal-table td:nth-child(3) {
background-color: rgba(217,4,4,.2);
box-shadow: inset 0px 0px 1px white;}
.normal-table{
font-family: arial;
font-size: .8rem !important;
vertical-align: middle;
border-collapse: collapse;
width: 100%;
margin:auto;}
.normal-table th{
text-transform: uppercase;
font-size: .7rem !important;
border: .5px solid #ebebeb;
width: 25%;
padding: 0 1rem;
text-align: left;}
.normal-table td{
padding: 10px 10px;
text-align: center;
border: .5px solid #ebebeb;}
.normal-table .tag1,.normal-table .tag2,.normal-table .tag3{
width: 25%;
padding:0 5px !important;
text-align: center;
text-transform: uppercase;
font-size: .7rem !important;
font-weight: bold;
color: white;
height: 2.5rem !important;}
.normal-table .tag1{
background-color: #595959!important;}
.normal-table .tag2{
background-color: #D90404 !important;}
.normal-table .tag3{
background-color: #393939!important;}
.normal-table .prodimg{
margin-bottom: 5px;
max-height: 100px !important;}
.normal-table .filaimagen{
vertical-align: text-top !important;}
.normal-table .nomproduct{
text-transform: uppercase;
font-weight: 700;
margin: 1rem 0;
font-size: .9rem;}
.normal-table .linkprod{
background-color: gold;
font-size: .7rem;
padding: .35rem .7rem;
border:.09rem solid #555555;
border-radius: 5px;
color: black;
text-decoration: none;
box-shadow: inset 0px 0px .5px #555555;}
/* ===================== MOBILE VERSION =====================*/
@media screen and (max-width: 624px){
.normal-table{
display: unset;
display: none;}
.mobile-table{
display: inline-table;}
.mobile-table h4{
font-size: .8rem;
text-transform: uppercase;}
.mobile-table,.mobile-table td{
width: 100%;
font-size: .8rem;
text-align:center;
padding: 0 .8rem;
border-collapse: collapse;
border: .5px solid #b8b8b8;
border-top: none;}
.mobile-table th{
border: .5px solid #b8b8b8;
border-collapse: collapse;
background-color: #D90404;
color: #fff;
text-align: left;
padding: .8rem 1rem;
width: 50%;
font-size: .7rem;
font-weight: 300;
text-transform: uppercase;}
.mobile-table .prodimg2{
max-height: 75px !important;}
.mobile-table .fila-mobile{
padding: 1.5rem 0 0 0;}
.mobile-table .nomproduct2{
margin: .8rem 0 .8rem 0;}
.mobile-table .linkprod2{
background-color: gold;
font-size: .9rem;
font-weight: 700;
padding: .35rem .5rem;
border:.09rem solid #555555;
border-radius: 5px;
color: black;
text-decoration: none;
box-shadow: inset 0px 0px .5px #555555;}
.tabs-table{
position:relative;
display: unset;
font-family: arial;
box-sizing: border-box;}
.tabs {
width: 100%;
display: inline-flex;
flex-wrap: wrap;}
.input {
display: unset;
left: 0%;
top:0%;
position: absolute;
opacity: 0;}
.label {
display: unset;
border: .5px solid #b8b8b8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 33.1%;
padding: 1rem 0;
text-align: center;
background-color: #fff;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: .75rem;
color: #7f7f7f;
box-shadow: inset 0px -3px 8px #B5B5B5;
transition: background 0.1s, color 0.1s;}
.input:focus + .label {
z-index: 1;}
.input:checked + .label {
width: 33.1%;
border-bottom: none;
border-top:.3rem solid #d90404;
background: #fff;
box-shadow: inset 0px 0px 0px #878787;
color: #000;}
.panel {
display: none;
margin: 0 auto;
width: 100%;
background: #fff;
order: 99;}
.input:checked + .label + .panel {
display: block;}}

Este código lo debes copiar y pegar en /Apariencia/Personalizar/CSS Adicional/. Otro aspecto que seguramente te va encantar es el hecho de que este código en particular funcionará sin importar el theme que tengas instalado.

Los cambios a este código te los iremos explicando seguramente el canal de Juan o el mío. Para ello escríbenos con los cambios que te gustaría ver.

Christian E. Muñoz

Me gustan las computadoras, el Marketing, Internet y nuevas tecnologías.
¡Vamos lo que se llama un geek!

5/5 (3 Reviews)

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentarios (4)

Muy buen recurso, gracias por la aportación. Sería interesante que indicaras cómo añadir filas y columnas, y que comentes el css para ver todos los cambios que podemos implantar.

Responder

Hola Fernando,

Que bueno que te agrade. Te comento que por el momento la tabla es «fija» quiere decir que no podrías agregar o quitar filas o columnas. Sé que puede ser un inconveniente pero estoy trabajando en un excel, que permita justamente elegir la cantidad de filas.

Con respecto de los cambios en el CSS, justamente estoy esperando comentarios para hacer los videos de lo más solicitado. Sin embargo, te motivo a hacer pruebas por tu cuenta. Verás que descubres lo fácil que puede ser.

Saludos,
CM

Por favor, necesito presupuesto para crear ciertas funcionalidades con HTML y CSS para mi sitio web y prescindir de algunos plugins.

Responder

Hola Juan Carlos,

Claro, te escribo al correo electrónico.

Saludos,
CM