table.html.twig in Simple Style Guide 8

<a name="table"></a>

<h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>

<div class="simple-styleguide">

    <p><strong>Normal Table:</strong></p>
    <table class="sticky-enabled sticky-table">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
            <th>Hire Date</th>
            <th>Number</th>
            <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
            <td>05/19/2014</td>
            <td>00234</td>
            <td>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
            <td>02/24/2011</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
            <td>10/19/2013</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
            <td>01/09/2016</td>
            <td>00345234225</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Chuck Woolery</td>
            <td>Makeup</td>
            <td>01/19/1978</td>
            <td>4322343223</td>
            <td>Eleifend vel.</td>
        </tr>
        <tr class="even">
            <td>Bob Eubanks</td>
            <td>Sales</td>
            <td>12/09/1999</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla. Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Regis Philbin</td>
            <td>Intern</td>
            <td>01/19/2013</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        </tbody>
    </table>

    <p><strong>Narrow Table:</strong></p>
    <table class="sticky-enabled sticky-table">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
        </tr>
        <tr class="odd">
            <td>Chuck Woolery</td>
            <td>Makeup</td>
        </tr>
        <tr class="even">
            <td>Bob Eubanks</td>
            <td>Sales</td>
        </tr>
        <tr class="odd">
            <td>Regis Philbin</td>
            <td>Intern</td>
        </tr>
        </tbody>
    </table>

    <p><strong>Long Table:</strong></p>
    <table class="sticky-enabled sticky-table responsive">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
            <th>Hire Date</th>
            <th>Birthday</th>
            <th>Favorite Color</th>
            <th>Lucky Number</th>
            <th>Number</th>
            <th>Description</th>
            <th>Random Column Heading</th>
            <th>Random Column Heading</th>
            <th>Random Column Heading</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
            <td>05/19/2014</td>
            <td>05/19/2014</td>
            <td>red</td>
            <td>7</td>
            <td>00234</td>
            <td>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
            <td>02/24/2011</td>
            <td>05/19/2014</td>
            <td>yellow</td>
            <td>7</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
            <td>10/19/2013</td>
            <td>05/19/2014</td>
            <td>green</td>
            <td>7</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
            <td>01/09/2016</td>
            <td>05/19/2014</td>
            <td>purple</td>
            <td>7</td>
            <td>00345234225</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        </tbody>
    </table>
</div>