unibz Pattern Library

Table Scroller 

<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.