How to Create Responsive Tables using CSS

This is the exact same table, only has @media queries applied to is so that when the screen is too narrow, it reformats (via only CSS) to make each row a bit like it’s own table. This makes for much more repetition and vertical space needed, but it fits within the horizontal space, so only natural vertical scrolling is needed to explore the data.

Attach to Your Markup

             
Transaction id
             
Task/Service Name
             
Tasker Name
             
Currency
             
Amount
             
Date
         
     

             
tr_1AvAiOHqtdB22t0rH7XY6uJy
             
Ahaahahaha
             
Jason 
             
CAD
             
$500041.00
             
Aug-26-2017 
         
             
tr_1AvAiOHqtdB22t0rH7XY6uJy
             
Ahaahahaha
             
Jason 
             
CAD
             
$500041.00
             
Aug-26-2017 
         
             
tr_1AvAiOHqtdB22t0rH7XY6uJy
             
Ahaahahaha
             
Jason 
             
CAD
             
$500041.00
             
Aug-26-2017 
         
             
tr_1AvAiOHqtdB22t0rH7XY6uJy
             
Ahaahahaha
             
Jason 
             
CAD
             
$500041.00
             
Aug-26-2017 
         
   

Add to Your CSS

.table-payment table{border:0!important;border-collapse:collapse;margin:0;padding:0;width:100%;table-layout:fixed;}
.table-payment table caption{font-size:1.5em;margin:.5em 0 .75em;}
.table-payment table tr{background:#f8f8f8;border:1px solid #ddd;padding:.35em;}
.table-payment table th,
.table-payment table td{padding:.625em;text-align:center;color:#5f5b5b;font-size:14px;line-height:18px;word-wrap: break-word;}
.table-payment table th{font-weight:700;color:#000;background-color:#ededed}
.table-payment table tr:nth-child(even) td{background-color:#f8f8f8}
.table-payment table tr:nth-child(odd) td{background-color:#fff}

@media screen and (max-width:600px){.table-payment table{border:0;}
.table-payment table caption{font-size:1.3em;}
.table-payment table thead{border:none;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.table-payment table tr{display:block; padding:0; border:0;border-top:1px solid #ddd}
.table-payment table td{border-bottom:1px solid #ddd;display:block;font-size:.8em;text-align:right;min-height:35px }
.table-payment table td:before{/*
    * aria-label has no advantage, it won't be read inside a table
    content:attr(aria-label);*/
content:attr(data-label);float:left;font-weight:bold;text-transform:uppercase;}
.table-payment table td:last-child{border-bottom:0;}
.DashboardRightContent .paymentBox{padding-bottom:0;}

.table-payment table tr:nth-child(even),
.table-payment table tr:nth-child(even) td{background-color:#f8f8f8}
.table-payment table tr:nth-child(odd),
.table-payment table tr:nth-child(odd) td{background-color:#fff}
.table-payment table tr + tr{border-top:1px solid #0085e9}

/*.table-payment table tr td:nth-child(even){background-color:#fff}
.table-payment table tr td:nth-child(odd){background-color:#f8f8f8}*/
}
@media screen and (max-width:350px){.table-payment table td{font-size:.7em;}

}