@media (max-width: 400px) {
    
    .responsive-table td:before {
/* Now like a table header */
/*position: inherit;*/
/* Top/left values mimic padding */
width: 100% !important;
float:left;
}
    
}
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
.responsive-table table,
.responsive-table thead,
.responsive-table tbody,
.responsive-table th,
.responsive-table td,
.responsive-table tr {
display: block;
}
 
/* Hide table headers (but not display: none;, for accessibility) */
.responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
 
.responsive-table tr { /*border: 1px solid #ccc;*/ }
  
.responsive-table td {
/* Behave like a "row" */
border: none ;
border-bottom: 1px solid #ddd ;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left !important;
}
 
.responsive-table td:before {
/* Now like a table header */
/*position: inherit;*/
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 50%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold; text-align:left; float:left;
}
 
/*
Label the data
*/
.responsive-table td:before { content: attr(data-title); }
}