table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; width: 100%; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } table tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: .35em; } table th, table td { padding: .625em; text-align: center; } @media screen and (max-width: 600px) { table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { border-bottom: 3px solid #ddd; display: block; } table td { border-bottom: 1px solid #ddd; display: block; text-align: right; } table td::before { content: attr(data-label); float: left; } } th.one { width: 80px; } th.two{ width: 100px; } th.three{ width: 130px; }th.four{ width: 300px; } th.five{ width: 150px; }th.five{ width: 110px; }th.six{ width: 90px; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter