Saltar al contenido

Tablas Comparativas Responsive

07/08/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)