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
Afsheen Shams
UAE
$5,257
28-09-2022
Md Riyazuddin
India
$1,074
25-09-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 th, table td { text-align: left; } table thead { float: left; width: 100px; } table thead tr{ display: block; } table thead tr th{ display: block; font-size: 13px; border-bottom: 1px solid #e1e1e1; } table thead tr th:last-child { border-bottom: 0; } table tbody { float: right; width: calc(100% - 100px); display: block; position: relative; overflow-x: auto; white-space: nowrap; } table tbody tr { display: inline-block; } table tbody tr td { border-bottom: 1px solid #efefef; display: block; font-size: 13px; } table tbody tr td:last-child { border-bottom: 0; } }
Press Ctrl+Space Key for Auto complete and Intelli Sense