HTML
CSS
JS
Run
Resize the browser window to see the effect:
Name
Country
Amount
Date
Mohammad Azad
India
$2,445
04-10-2022
Abu Bilal
India
$1,234
03-10-2022
Bilal Azad
USA
$3,213
02-10-2022
Yusuf Shams
Canada
$3,257
01-10-2022
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: "Open Sans"; line-height: 1.5; } table { border: 1px solid #efefef; border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 14px; } table tr { border: 1px solid #efefef; } table th, table td { padding: 12px; text-align: center; } table th { padding: 12px; background-color: #f2f2f2; } @media (max-width: 767px) { table { border: 0; } table thead { display: none; } table tr { display: block; margin-bottom: 15px; } table td { border-bottom: 1px solid #efefef; display: block; font-size: 13px; text-align: right; } 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; } table td:last-child { border-bottom: 0; } }
Press Ctrl+Space Key for Auto complete and Intelli Sense