Tabla Responsive modelo 1 html y css
Fecha Publicación:
11 de Junio de 2020
Fecha Modificación:
11 de Junio de 2020
Ver tambien : Tabla Responsive modelo 2 html y css
Estructura Html
<div class="wrapper-table-general table-widthfull">
<table class="table-general table-responsive table-widthfull">
<thead>
<tr>
<th class="th-light">Periodo</th>
<th>.com.pe</th>
<th>.pe</th>
<th>nom.pe<br>net.pe<br>org.pe</th>
<th>edu.pe<br>gob.pe<br>mil.pe</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Periodo"><div class="td-inner">1 año</div></td>
<td data-label=".com.pe"><div class="td-inner">S/.
210.00
</div></td>
<td data-label=".pe"><div class="td-inner">S/. 210.00</div></td>
<td data-label="nom.pe, net.pe, org.pe"><div class="td-inner">S/. 210.00</div></td>
<td data-label="edu.pe, gob.pe, mil.pe"><div class="td-inner">S/. 210.00</div></td>
</tr>
<tr>
<td data-label="Periodo"><div class="td-inner">2 años</div></td>
<td data-label=".com.pe"><div class="td-inner">S/ 210.00</div></td>
<td data-label=".pe"><div class="td-inner">S/210.00</div></td>
<td data-label="nom.pe, net.pe, org.pe"><div class="td-inner">S/ 210.00</div></td>
<td data-label="edu.pe, gob.pe, mil.pe"><div class="td-inner">S/ 210.00</div></td>
</tr>
<tr>
<td data-label="Periodo"><div class="td-inner">3 años</div></td>
<td data-label=".com.pe"><div class="td-inner">S/ 210.00</div></td>
<td data-label=".pe"><div class="td-inner">S/ 210.00</div></td>
<td data-label="nom.pe, net.pe, org.pe"><div class="td-inner">S/ 210.00</div></td>
<td data-label="edu.pe, gob.pe, mil.pe"><div class="td-inner">S/ 210.00</div></td>
</tr>
</tbody>
</table>
</div>
Estructura CSS
/*
#######################################
TABLA GENERAL
#######################################
Aumentar Tamaño derecho y Izquierdo
nota deves trabajar con ambos sino se distorcionara
1) Para Aumentar tamaño lado izquierdo trabajar con width:
@media (max-width: 767px)
.table-general.table-responsive td:before { width: 40%;}
2) para aumentar Tamano lado derecho trabajar con padding-left
@media (max-width: 767px)
.table-general.table-responsive td .td-inner {padding-left: 40%;}
*/
table { border-collapse : collapse; border-spacing : 0; }
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
.wrapper-wrapper{overflow-y: hidden; width: 100%; margin-bottom: 20px;}
.table-widthfull{width: 96%;}
.wrapper-table-general{border: 1px solid #000; overflow: hidden; display: inline-block;/* min-width: 100%;*/
-webkit-border-radius: 6px; margin: 0 auto;
-moz-border-radius: 6px;
border-radius: 6px;
}
.table-general {margin-bottom: 0; text-align: center; width: 100%;}
.table-general th{background-color: #d68c92; color:#fff; border-bottom: 1px solid #b6777c;}
.table-general thead th{text-align: center}
.table-general thead th.th-light{background-color: #eac5c8; color: #000}
.table-general thead th.th-dark{background-color: #a994a5; color: #000}
.table-general tbody{}
.table-general td .td-inner{ font-size: 18px; }
.table-general tr:nth-child(even) {background: #FFFFFF}
.table-general tr:nth-child(odd) {background: #BCBCBC;}
.table-general tr td, .table-general tr th{padding: 20px;}
.table-general tr td{ border-right: 1px solid #d1d1d1; }
.table-general td:last-child, .table-general th:last-child{ border-right: 0; }
.table-general tr td input[type=checkbox].checkbox{margin-right: 8px;}
.table-general tr th{ border-right: 1px solid #b6777c;}
.table-general tr td strong, .table-general tr th strong{font-family: 'Carnas-Bold';}
.table-general.table-responsive select{border:solid 1px #aacfe4;height: 45px;padding: 10px 8px;font-size: 16px;font-weight: bold;}
@media all and (max-width : 767px) {
/*TABLA RESPONSIVA*/
.wrapper-table-general{min-width: 100%;}
.table-widthfull{width: 100%;}
.table-general.table-responsive tr {border-bottom: 1px solid #222;}
.table-general.table-responsive tr:last-child {border-bottom: 0; }
.table-general.table-responsive tr td{border-right: 0; padding: 0 !important;}
.table-general.table-responsive tr td, .table-general.table-responsive tr th{padding: 12px 20px;}
.table-general.table-responsive thead{display: none;}
.table-general.table-responsive td{display: block;/* text-align: right; texto se alinea a derecha alex*/ overflow: hidden; position: relative;}
.table-general.table-responsive td .td-inner{ padding-top: 10px; padding-left: 40%; }
.table-general.table-responsive tr:nth-child(even) td .td-inner{}
.table-general.table-responsive td:last-child{border-bottom: 0;}
/*1) alex padding: 25px; aumenta el alto lado derecho
2) width: 40%; aumenta o disminuye el ancho lado izquierdo deves trabajar con td-inner padding-left: que aumenta o disminuye el lado izquerdo*/
.table-general.table-responsive td:before{ content: attr(data-label); float: left; text-transform: uppercase;/* font-size: 0.9em;*/ font-family: 'Carnas-bold'; display: block; width: 40%; padding: 25px; text-align: left;
}
.table-general.table-responsive td:after{content: ''; position: absolute; left: 50%; width: 100%; bottom: 0; height: 1px; background-color: #f0f0f0;}
.table-general.table-responsive tr:nth-child(even) td:after{background-color: #dcdcdc;}
.table-general.table-responsive tr td:last-child:after{background-color: transparent;}
.table-general.table-responsive tr td:before{background-color: #eac5c8; border-bottom: 1px solid #D6AFB2;}
.table-general.table-responsive tr td:last-child:before, .table-general.table-responsive tr:nth-child(even) td:last-child:before{border-bottom: 0;}
.table-general.table-responsive tr:nth-child(even) td:before{background-color: #d68c92; color: #fff; border-bottom: 1px solid #b6777c;}
.waf-ico {float: none;width: 100%;margin-bottom: 30px;}
.waf-txt {padding-left: 0;}
}
Resultado Final
Articulo : 1197 - Veces Leidas