<div class="table-wrapper editorial ">
<table class="table--content">
<caption>This is the table caption. It should be included, even if it is not visible, for accessibility purposes.</caption>
<thead>
<tr>
<th scope="col">Row Labels</th>
<th class="align-right" scope="col">Some Numbers</th>
<th class="align-center" scope="col">Tag</th>
<th scope="col">Too Much Text</th>
<th scope="col">Yet More Text</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row Label One</th>
<td class="align-right">10,000</td>
<td class="align-center">Lorem</td>
<td>Suspendisse mollis nunc et magna laoreet, vitae egestas metus faucibus. Vivamus sed efficitur odio, eu ultricies odio. Aenean blandit auctor.</td>
<td>Sed vestibulum aliquam orci, nec.</td>
</tr>
<tr>
<th scope="row">Row Label Two</th>
<td class="align-right">50¢</td>
<td class="align-center">Ipsum</td>
<td>Vivamus a pellentesque libero. Maecenas consequat mollis metus in gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.</td>
<td>In dui libero, tempus quis.</td>
</tr>
<tr>
<th scope="row">Row Label Three</th>
<td class="align-right">14.67</td>
<td class="align-center">Dolor</td>
<td>Aliquam eget dolor cursus, suscipit massa id, lobortis eros. Cras ac hendrerit est, eu mattis mi. Donec posuere, nisl in.</td>
<td>Praesent libero mauris, laoreet id.</td>
</tr>
<tr>
<th scope="row">Row Label Four</th>
<td class="align-right">22</td>
<td class="align-center">Sit</td>
<td>Integer auctor posuere porta. Sed nibh odio, maximus ut justo sed, dignissim fringilla lacus. Praesent in dignissim urna, ac venenatis.</td>
<td>In hac habitasse platea dictumst.</td>
</tr>
<tr>
<th scope="row">Row Label Five</th>
<td class="align-right">12,345,678</td>
<td class="align-center">Amet</td>
<td>Vestibulum eleifend rutrum sapien, id eleifend lorem scelerisque sit amet. Maecenas ultrices sem ut purus imperdiet vulputate. Aliquam at tortor.</td>
<td>Curabitur et sem quam. Aliquam.</td>
</tr>
</tbody>
</table>
</div>
{% if table is empty or block('table_body') is empty %}
<div class="table-wrapper editorial {{ table.responsive_strategy }}">
{% for instance in 1 .. table.count|default(1) %}
<table class="{{ table.variant }}" {% if 'tablesaw' in table.variant %}data-tablesaw-mode="stack"{% endif %}>
<caption>{{ table.caption }}</caption>
{% block table_head %}
<thead>
<tr>
<th scope="col">Row Labels</th>
<th class="align-right" scope="col">Some Numbers</th>
<th class="align-center" scope="col">Tag</th>
<th scope="col">Too Much Text</th>
<th scope="col">Yet More Text</th>
</tr>
</thead>
{% endblock %}
{% block table_body %}
<tbody>
<tr>
<th scope="row">Row Label One</th>
<td class="align-right">10,000</td>
<td class="align-center">Lorem</td>
<td>Suspendisse mollis nunc et magna laoreet, vitae egestas metus faucibus. Vivamus sed efficitur odio, eu ultricies odio. Aenean blandit auctor.</td>
<td>Sed vestibulum aliquam orci, nec.</td>
</tr>
<tr>
<th scope="row">Row Label Two</th>
<td class="align-right">50¢</td>
<td class="align-center">Ipsum</td>
<td>Vivamus a pellentesque libero. Maecenas consequat mollis metus in gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.</td>
<td>In dui libero, tempus quis.</td>
</tr>
<tr>
<th scope="row">Row Label Three</th>
<td class="align-right">14.67</td>
<td class="align-center">Dolor</td>
<td>Aliquam eget dolor cursus, suscipit massa id, lobortis eros. Cras ac hendrerit est, eu mattis mi. Donec posuere, nisl in.</td>
<td>Praesent libero mauris, laoreet id.</td>
</tr>
<tr>
<th scope="row">Row Label Four</th>
<td class="align-right">22</td>
<td class="align-center">Sit</td>
<td>Integer auctor posuere porta. Sed nibh odio, maximus ut justo sed, dignissim fringilla lacus. Praesent in dignissim urna, ac venenatis.</td>
<td>In hac habitasse platea dictumst.</td>
</tr>
<tr>
<th scope="row">Row Label Five</th>
<td class="align-right">12,345,678</td>
<td class="align-center">Amet</td>
<td>Vestibulum eleifend rutrum sapien, id eleifend lorem scelerisque sit amet. Maecenas ultrices sem ut purus imperdiet vulputate. Aliquam at tortor.</td>
<td>Curabitur et sem quam. Aliquam.</td>
</tr>
</tbody>
{% endblock %}
</table>
{% endfor %}
</div>
{% endif %}
{
"table": {
"caption": "This is the table caption. It should be included, even if it is not visible, for accessibility purposes.",
"variant": "table--content"
}
}
table {
margin-bottom: 2rem;
}
.editorial {
table: {
// margin-bottom: 1rem;
}
}
.table-wrapper,
.editorial {
table {
border-collapse: collapse;
th,
td {
padding: rr-gridbase(2);
}
th {
&:first-child {
text-align: left;
}
}
thead {
tr {
&:last-child {
th {
border-bottom: 3px color(gray-light) double;
}
}
}
}
tbody {
tr {
border-bottom: 1px color(gray-lighter) solid;
}
}
caption {
padding: {
top: rr-gridbase(2);
bottom: rr-gridbase(2);
}
font-style: italic;
caption-side: bottom;
}
&.table--stripe {
tbody {
tr {
&:nth-child(odd) {
background-color: color(gray-lightest);
}
}
}
}
}
&.table-wrapper--overflow {
max-width: 100%;
overflow: auto;
}
&.table-wrapper--columnize {
table {
width: 100%;
}
thead {
display: none;
}
tbody tr {
// border-bottom: 4px color(davidson-white) solid;
}
th,
td {
display: block;
border-width: 0;
&.align-right {
text-align: initial;
}
}
.responsive-label {
display: inline;
font-weight: 500;
&::after {
content: ': ';
}
}
@supports (display: grid) {
tr {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 4px;
th {
grid-column: 1 / -1;
}
}
}
@include rr-break-directive(l) {
thead {
display: table-header-group;
}
tr {
display: table-row;
}
th,
td {
display: table-cell;
padding-top: rr-gridbase(2);
padding-bottom: rr-gridbase(2);
border-width: 4px;
&.align-right {
text-align: right;
}
}
tbody tr {
// border-bottom-width: 0;
}
.responsive-label {
display: none;
}
}
}
}
.photo-table {
td {
vertical-align: top;
&:first-child {
padding-right: 1rem;
img {
min-width: rem(100px);
}
}
}
&.photo-table--flipped {
td {
&:last-child {
padding-left: 1rem;
img {
min-width: rem(100px);
}
}
}
}
}
jQuery(document).ready( () => {
responsive_grid_table();
});
const responsive_grid_table = () => {
const $table_columnize = $('.table-wrapper--columnize');
const $table_tablesaw = $('.tablesaw');
if ($table_columnize.length < 1 && $table_tablesaw.length < 1) return;
if ($table_columnize.length >= 1) {
const headers = $table_columnize.find('thead th').map((i, v) => {
return v.innerText;
});
const rows = $table_columnize.find('tbody tr').map((i, v) => {
$(v).find('th,td').map((p, q) => {
const $cell = $(q);
if ($cell.is('td')) {
$cell.prepend('<div class="responsive-label">' + headers[p] + '</div>');
}
});
});
}
if ($table_tablesaw.length >= 1) {
Tablesaw.init();
}
};
Table styles. Tables in an .editorial
container will get these styles automatically, otherwise the table requires the content-table
class. This way default browser table styles are not affected.
To be responsive, tables require a wrapper. There are two responsive strategies:
1) For data-intensive or huge tables, the table-wrapper--overflow
style lets tables maintain their row-column relationships; the whole table is visible on small screens by scrolling in two axis.
2) The table-wrapper--columnize
table fits tds
to a grid; columns increase based on the available space. If the browser does not support grid, each td takes up a row. The thead
is hidden, but the column headers in the thead
are prepended to the content of each td
if the included responsive-table.js
file is included. (If it is not, the table is slightly less accessible but will still work).
For best results for #2, the thead
should be a single row and no th
should span more than one column; the cell labeling algorithm is pretty naïve.