JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<table id="table_results" class="width200"><thead><tr>
            <th><input type="checkbox" class="allCpr"></th>
            <th>#</th>
            <th>DOCTS</th>
            <th>N DOC</th>
            <th>RUT </th>
            <th>PROVEEDOR DE LA EMPRESA</th>
            <th>FECHA</th>
            <th>NO AFECTO</th>
            <th>NETO</th>
            <th>O. IMP</th>
            <th>IVA </th>
            <th>TOTAL</th>
        </tr></thead><tbody>
<tr class="odd"><td  ><span>103</span></td>
<td  ><span>1</span></td>
<td   ><span>876</span></td>
<td data-type="date" class='fecha' ><span>2014-07-17</span></td>
<td  ><span>0</span></td>
<td  ><span>33633859</span></td>
<td  ><span>0</span></td>
<td  ><span>6390433</span></td>
<td  ><span>40024292</span></td>
<td  ><span><a ">10</a></span></td>
<td  ><span>7189710-9</span></td>
<td  ><span>FELIPE ESPINOZA URZUA</span></td>
<td  ><span>1</span></td>
</tr>
<tr class="even"><td  ><span>104</span></td>
<td  ><span>2</span></td>
<td   ><span>877</span></td>
<td data-type="date" class='fecha' ><span>2014-07-31</span></td>
<td  ><span>0</span></td>
<td  ><span>35292850</span></td>
<td  ><span>0</span></td>
<td  ><span>6705642</span></td>
<td  ><span>41998492</span></td>
<td  ><span><a ">10</a></span></td>
<td  ><span>7189710-9</span></td>
<td  ><span>FELIPE ESPINOZA URZUA</span></td>
<td  ><span>1</span></td>
</tr>
<tr class="odd"><td  ><span>105</span></td>
<td  ><span>3</span></td>
<td   ><span>4136</span></td>
<td data-type="date" class='fecha' ><span>2014-07-31</span></td>
<td  ><span>0</span></td>
<td  ><span>200000</span></td>
<td  ><span>0</span></td>
<td  ><span>38000</span></td>
<td  ><span>238000</span></td>
<td  ><span><a ">10</a></span></td>
<td  ><span>78444340-K</span></td>
<td  ><span>EXPORTADORA CAMPOFRUT LTDA.</span></td>
<td  ><span>1</span></td>
</tr>
<tr class="even"><td  ><span>106</span></td>
<td  ><span>4</span></td>
<td   ><span>12</span></td>
<td data-type="date" class='fecha'...

CSS

body {margin:0;padding:50px; font-family:"proxima-nova-alt",Helvetica,Roboto,Arial,sans-serif;}
	.fecha{
	  width:100px;
	}
  td:nth-of-type(12){
    text-align:left;
  }
  td:nth-of-type(11){
    width:100px;
  }
  
	h2 {font-size:36px;margin:0 0 10px 0}
	p {margin:0 0 10px 0}
	
	table.width200,table.rwd_auto {border:1px solid #ccc;width:100%;margin:0 0 50px 0}
		.width200 th,.rwd_auto th {background:#ccc;padding:5px;text-align:center;}
		.width200 td,.rwd_auto td {border-bottom:1px solid #ccc;padding:5px;text-align:center}
		.width200 tr:last-child td, .rwd_auto tr:last-child td{border:0}
		
	.rwd {width:100%;overflow:auto;}
		.rwd table.rwd_auto {width:auto;min-width:100%}
			.rwd_auto th,.rwd_auto td {white-space: nowrap;}
			
	@media only screen and (max-width: 760px), (min-width:768px) and (max-width: 1024px)  
	{
	
		table.width200, .width200 thead, .width200 tbody, .width200 th, .width200 td, .width200 tr { display: block;}
		
		.width200 thead tr { position: absolute;top: -9999px;left: -9999px; }
		
		.width200 tr { border: 1px solid #ccc; }
		
		.width200 td { border: none;border-bottom: 1px solid #ccc; position: relative;padding-left: 50%;text-align:left }
		
		.width200 td:before {  position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
		
		.width200 td:nth-of-type(1):before { content: "id"; }
		.width200 td:nth-of-type(2):before { content: "correlativo"; }
		.width200 td:nth-of-type(3):before { content: "nrodocto"; }
		.width200 td:nth-of-type(4):before { content: "fecha"; }
		.width200 td:nth-of-type(5):before { content: "no_afecto"; }
    .width200 td:nth-of-type(6):before { content: "neto"; }
		.width200 td:nth-of-type(7):before { content: "otro_impuesto"; }
		.width200 td:nth-of-type(8):before { content: "iva"; }
		.width200 td:nth-of-type(9):before { content: "total"; }
		.width200 td:nth-of-type(10):before { content: "id docto"; }
    .width200 td:nth-of-type(11):before { content: "id persona";...