A Better look Responsive Table

HTML
<table id="musa"> <caption>Files</caption> <thead> <tr><th>???<th>Year<th>?? <tbody> <tr> <td>My Name <td>1988 <td>????? <tr> <td>NAME <td>1997 <td>(Best Script) <tr> <td>??? <td>??? <td>??? <tr> <td>??? <td>?? <td>?? </table>
CSS
table#musa { margin: 0 auto; border-collapse: collapse; font-family: Agenda-Light, sans-serif; font-weight: 100; background: #333; color: #fff; text-rendering: optimizeLegibility; border-radius: 5px; } table#musa caption { font-size: 2rem; color: #444; margin: 1rem; background-size: contain; background-repeat: no-repeat; background-position: center left, center right; } table#musa thead th { font-weight: 600; } table#musa thead th, table#musa tbody td { padding: .8rem; font-size: 1.4rem; } table#musa tbody td { padding: .8rem; font-size: 1.4rem; color: #444; background: #eee; } table#musa tbody tr:not(:last-child) { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } @media screen and (max-width: 600px) { table#musa caption { background-image: none; } table#musa thead { display: none; } table#musa tbody td { display: block; padding: .6rem; } table#musa tbody tr td:first-child { background: #666; color: #fff; } table#musa tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 6rem; } }
JAVASCRIPT
var headertext = [], headers = document.querySelectorAll("#musa th"), tablerows = document.querySelectorAll("#musa th"), tablebody = document.querySelector("#musa tbody"); for(var i = 0; i < headers.length; i++) { var current = headers[i]; headertext.push(current.textContent.replace(/\r?\n|\r/,"")); } for (var i = 0, row; row = tablebody.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.setAttribute("data-th", headertext[j]); } }
Expand for more options Login