Tabla Responsive modelo 1 html y css

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