Ensuring consistency across all tables on my website is crucial to me, which is why I am utilizing the same class for all of them. While everything appears perfect on desktop, I'm facing challenges when it comes to mobile responsiveness. The tables fail to span the full width of the page and align columns correctly on smaller screens, and in some cases, the headers disappear for reasons beyond my understanding!
Below is the CSS code I am working with:
table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th {
background-color: #545556;
color: white;
padding: .425em;
text-align: center;
font-size: .75em;
letter-spacing: .1em;
text-transform: uppercase;
}
table td {
padding: .425em;
text-align: center;
word-wrap: break-word;
font-size: 0.75em;
}
@media screen and (max-width: 768px) {
img {max-width: 30%;}
table {
align-items: center;
border: 0;
display: inherit;
font-size: 0.5em;
width: 100%;
}
img {max-width: 30%;}
table caption {
font-size: 1.3em;
overflow: hidden;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
table tr {
border-bottom: 1px solid #ddd;
font-size: 0.4em;
margin-bottom: .625em;
display: inherit;
width: 100%;
}
table td {
border-bottom: 1px solid #ddd;
font-size: .4em;
text-align: center;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
HTML:
<table>
<tbody>
<thead>
<th> TEST</th>
<th> TEST</th>
<th> TEST</th>
<th> TEST</th>
<th> TEST</th>
</thead>
<tr>
<td> TEST</td>
<td> TEST</td>
<td> TEST</td>
<td>TEST </td>
<td>TEST </td>
</tr>
<tr>
<td> TEST</td>
<td>TEST </td>
<td>TEST </td>
<td>TEST </td>
<td>TEST </td>
</tr>
<tr>
<td> TEST</td>
<td> TEST</td>
<td> TEST</td>
<td> TEST</td>
<td> TEST</td>
</tr>
<tr>
<td>TEST </td>
<td>TEST </td>
<td>TEST </td>
<td>TEST </td>
<td>TEST </td>
</tr>
</tbody>
</table>
CSS Fiddle: http://jsfiddle.net/dn1e9saL/1/