<div style="width: 320px; white-space: nowrap">
<div class="tableScroller">
<div class="tableScroller_inner">
<table class="table">
<thead>
<tr>
<td>title 1</td>
<td>title 2</td>
<td>title 3</td>
<td>title 4</td>
<td>title 5</td>
<td>title 6</td>
<td>title 7</td>
<td>title 8</td>
</tr>
</thead>
<tbody>
<tr>
<td>very-long-1</td>
<td>very-long-2</td>
<td>very-long-3</td>
<td>very-long-4</td>
<td>very-long-5</td>
<td>very-long-6</td>
<td>very-long-7</td>
<td>very-long-8</td>
</tr>
<tr>
<td>very-long-1</td>
<td>very-long-2</td>
<td>very-long-3</td>
<td>very-long-4</td>
<td>very-long-5</td>
<td>very-long-6</td>
<td>very-long-7</td>
<td>very-long-8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="width: 320px; white-space: nowrap">
<div class="tableScroller">
<div class="tableScroller_inner">
{{render '@table' (contextData '@table-scroller')}}
</div>
</div>
</div>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"head": [
"title 1",
"title 2",
"title 3",
"title 4",
"title 5",
"title 6",
"title 7",
"title 8"
],
"rows": [
{
"cols": [
"very-long-1",
"very-long-2",
"very-long-3",
"very-long-4",
"very-long-5",
"very-long-6",
"very-long-7",
"very-long-8"
]
},
{
"cols": [
"very-long-1",
"very-long-2",
"very-long-3",
"very-long-4",
"very-long-5",
"very-long-6",
"very-long-7",
"very-long-8"
]
}
]
}
This module is used to make tables scroll horizontally on small screens.
In the example the whole element is sorrounded by another div
with a fixed inline width to showcase the behaviour.