<div class="table-responsive">
<table class="table table-info" role="grid" summary="A description of the table should go here for screenreaders.">
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150" class="number">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td class="number">12</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td class="number">24</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td class="number">36</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td class="number">48</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-info" role="grid" summary="A description of the table should go here for screenreaders.">
<thead>
<tr>
<th width="200">{{header-text}}</th>
<th>{{header-text}}</th>
<th width="150">{{header-text}}</th>
<th width="150" class="number">{{header-text}}</th>
</tr>
</thead>
<tbody>
{{#each numbers}}
<tr>
<td>{{../short-text}}</td>
<td>{{../long-text}}</td>
<td>{{../short-text}}</td>
<td class="number">{{this}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{
"short-text": "Content Goes Here",
"long-text": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.",
"header-text": "Table Header",
"numbers": [
12,
24,
36,
48
]
}
table {
width:100%;
border: none;
thead, tfoot, thead tr {
background-color:$geyser;
}
tr.even, tr.alt, tr:nth-child(even) {
background-color: $ghost-gray;
}
th, td {
text-align: left;
padding: 0.5em;
&.align-right {
text-align: right;
}
&.number {
text-align: right;
}
}
}
// Added from Bootstrap
.table-responsive {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: 768px) {
width: 100%;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
// Tighten up spacing
> .table {
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
}
}
Accessible tables.
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.