Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@media screen and (max-width: 700px) {
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 100%;
}
table td {
display: block;
width: 100%;
}
table tr th {
border-bottom: 1px solid rgba(0,0,0,0.2);
}
table thead,
table thead + tbody tr:nth-child(even),
table tbody:first-child tr:nth-child(odd) {
background: rgba(0,0,0,0.05);
}
/* Use flexbox to remove the headers from their columns */
table thead tr,
table tbody:first-child tr:first-child {
display: flex;
text-align: left;
}
/* Remove the right border from all but the last cell */
table thead tr th:not(:last-child),
table tr:first-child th:not(:last-child) {
border-right: 0;
}
/* Let the last cell take up all of the available space, bringing all the content next to each other */
table thead tr th:last-child,
table tr:first-child th:last-child {
flex: 1;
}
/* Remove any LEFT padding from all except the first cell */
table thead tr th:not(:first-child),
table tr:first-child th:not(:first-child) {
padding-left: 0;
}
/* Remove any RIGHT padding from all except the last cell */
table thead tr th:not(:last-child),
table tr:first-child th:not(:last-child) {
padding-right: 0;
}
/* Add a comma and a space before to all but the first cell */
table thead tr th:not(:first-child):before,
table tr:first-child th:not(:first-child):before {
content: ',\00a0';
}
/* Add ' & ' before the last cell */
table thead tr th:last-child:before,
table tr:first-child th:last-child:before {
content: '\00a0\0026\00a0';
}
}
<html>
<head>
<title>Wrapped table headers</title>
<link type="text/css" rel="stylesheet" href="collapsed-table-headers.css" />
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Summary</th>
<th>Description</th>
</tr>
<tr>
<td>1</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
<tr>
<td>2</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
<tr>
<td>3</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>ID</th>
<th>Summary</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
<tr>
<td>2</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
<tr>
<td>3</td>
<td>Vestibulum eros eros, porttitor ac urna at</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.