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]);
}
}
