<div class="table-container " tabindex="0" role="group" aria-labelledby="caption-id">
<table>
<thead>
<tr>
<th scope="col">Heading</th>
<th scope="col">Column Heading 1</th>
<th scope="col">Column Heading 2</th>
<th scope="col">Column Heading 3</th>
<th scope="col">Column Heading 4</th>
<th scope="col">Column Heading 5</th>
<th scope="col">Column Heading 6</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Footer Heading</th>
<td>Column Footer 1</td>
<td>Column Footer 2</td>
<td>Column Footer 3</td>
<td>Column Footer 4</td>
<td>Column Footer 5</td>
<td>Column Footer 6</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Row Heading 1</th>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
<td>Cell 1.4</td>
<td>Cell 1.5</td>
<td>Cell 1.6</td>
</tr>
<tr>
<th scope="row">Row Heading 2</th>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
<td>Cell 2.4</td>
<td>Cell 2.5</td>
<td>Cell 2.6</td>
</tr>
<tr>
<th scope="row">Row Heading 3</th>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
<td>Cell 3.4</td>
<td>Cell 3.5</td>
<td>Cell 3.6</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container {{classes}}" tabindex="0" role="group"{{#if caption}} aria-labelledby="{{caption.id}}"{{/if}}>
<table>
{{#if head}}<thead>
<tr>
{{#each head.cells}}<th scope="col">{{{data}}}</th>{{/each}}
</tr>
</thead>{{/if}}
{{#if foot}}<tfoot>
<tr>
{{#if foot.header}}<th scope="row">{{{foot.header}}}</th>{{/if}}
{{#each foot.cells}}<td>{{{data}}}</td>{{/each}}
</tr>
</tfoot>{{/if}}
<tbody>
{{#each rows}}<tr>
{{#if header}}<th scope="row">{{{header}}}</th>{{/if}}
{{#each cells}}<td>{{{data}}}</td>{{/each}}
</tr>{{/each}}
</tbody>
</table>
</div>
/*
* Module: BYU Table
* Desc: Handle tables that are wider than thier container
*/
var byu_table = (function(){
'use strict';
var doc = document;
// Execute the function
byu_main.executeOnLoad( updateTables );
/*
* Func: UpdateTables
* Desc: Detect and handle tables that are wider than their container.
* Works on tables contained within an element of class "table-container".
* Args: none
*/
function updateTables() {
var containers = doc.getElementsByClassName("table-container");
for (var i=0; i < containers.length; i++) {
var container = containers[i];
updateTable( container );
}
}
/*
* Func: UpdateTable
* Desc: Check if a table is wider than its container, and mark scrolling position within it
* Args: @container - HTML Element - A container element for a table (probably of class "table-container")
*/
function updateTable( container ) {
var c_width = container.offsetWidth;
var table = container. getElementsByTagName("table")[0];
var t_width = table.offsetWidth;
var table_wide_class = "table-wide";
var start_visible_class = "start-visible";
var end_visible_class = "end-visible";
if ( c_width < t_width ) {
// Add table wide class if it's not already there
if ( !container.hasClass( table_wide_class ) ) {
container.addClass( table_wide_class );
}
// Check if the start of the table is visible and handle
if ( table.scrollLeft == 0 ) {
if ( !container.hasClass( start_visible_class ) ) {
container.addClass( start_visible_class );
}
} else {
container.removeClass( start_visible_class );
}
// Check if the end of the table is visible and handle
if ( t_width - table.scrollLeft == c_width ) {
if ( !container.hasClass( end_visible_class ) ) {
container.addClass( end_visible_class );
}
} else {
container.removeClass( end_visible_class );
}
}
// The table is not too wide for its container
else {
container.removeClass( table_wide_class );
}
}
})();
.table-container
overflow-x: auto
table
border-collapse: collapse
caption
@extend .caption
.spacing-tight &, .spacing-extratight &
font-size: $fontSize16
th
font-weight: $font-weight-bold
td, th
padding: $spacing3 $spacing4
border: 1px solid $colorLine
// border: none
text-align: left
vertical-align: top
line-height: 1.4
.border-row &
border-right: none
border-left: none
.border-open &
border: none
.spacing-tight &
padding: $spacing2 $spacing3
.spacing-extratight &
padding: $spacing1 $spacing2
tr
*:first-child
border-left: none
padding-left: $spacing1
*:last-child
border-right: none
padding-right: $spacing2
&:first-child
td, th
border-top: none
&:last-child
td, th
border-bottom: none
thead
border-bottom: 2px solid $colorLine
.border-open &
border-bottom: none
tfoot
border-top: 2px solid $colorLine
.border-open &
border-top: none
.table-wide
background: linear-gradient(90deg, white 0%, rgba(255,255,255,0)),linear-gradient(-90deg, white 0%, rgba(255,255,255,0)) 100% 0, linear-gradient(to right, #cccccc 0%, rgba(255,255,255,0)), linear-gradient(-90deg, #cccccc 0%, rgba(255,255,255,0)) 100% 0%
background-repeat: no-repeat
background-color: #fff
background-size: 100px 100%, 100px 100%, 14px 100%, 14px 100%
background-attachment: local, local, scroll, scroll
{
"heading": {
"data": "Wide Table",
"level": "h3"
},
"caption": {
"data": "Caption text",
"id": "caption-id"
},
"head": {
"cells": [
{
"data": "Heading"
},
{
"data": "Column Heading 1"
},
{
"data": "Column Heading 2"
},
{
"data": "Column Heading 3"
},
{
"data": "Column Heading 4"
},
{
"data": "Column Heading 5"
},
{
"data": "Column Heading 6"
}
]
},
"foot": {
"header": "Footer Heading",
"cells": [
{
"data": "Column Footer 1"
},
{
"data": "Column Footer 2"
},
{
"data": "Column Footer 3"
},
{
"data": "Column Footer 4"
},
{
"data": "Column Footer 5"
},
{
"data": "Column Footer 6"
}
]
},
"rows": [
{
"header": "Row Heading 1",
"cells": [
{
"data": "Cell 1.1"
},
{
"data": "Cell 1.2"
},
{
"data": "Cell 1.3"
},
{
"data": "Cell 1.4"
},
{
"data": "Cell 1.5"
},
{
"data": "Cell 1.6"
}
]
},
{
"header": "Row Heading 2",
"cells": [
{
"data": "Cell 2.1"
},
{
"data": "Cell 2.2"
},
{
"data": "Cell 2.3"
},
{
"data": "Cell 2.4"
},
{
"data": "Cell 2.5"
},
{
"data": "Cell 2.6"
}
]
},
{
"header": "Row Heading 3",
"cells": [
{
"data": "Cell 3.1"
},
{
"data": "Cell 3.2"
},
{
"data": "Cell 3.3"
},
{
"data": "Cell 3.4"
},
{
"data": "Cell 3.5"
},
{
"data": "Cell 3.6"
}
]
}
]
}