SIA Web Design Library

Tables: Scrollable

No notes defined.

<table>
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope='row'>Row Header 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th scope='row'>Row Header 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
 
{% if modifiers %}
<div class='{{ display.modifiers|join( ' ' ) }}'>
{% endif %}
    <table>
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope='row'>Row Header 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th scope='row'>Row Header 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
{% if modifiers %}
</div>
{% endif %}
 
{
  "display": {
    "modifiers": [
      "u-horizontal-scroll"
    ]
  }
}