index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive table examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Responsive table example">
    <!-- Basic variables -->
    <style type="text/css">
        :root {
            --primary-color: linen;
            --bg-color: #00bcd42b;
        }
    </style>
    <!-- Basic page/table styles that can be excluded -->
    <style type="text/css">
        body {margin: 20px auto; padding: 0 20px; background-color: var(--primary-color);}
        table {margin: 10px; background: white; padding: 10px; border-radius: 5px; border-collapse: collapse; overflow: scroll;}
        tr {margin: 5px 0;}
        th {min-width: 150px; padding: 10px; border: none; background-color: var(--bg-color);}
        td {vertical-align: middle; text-align:center; padding: 10px; border:1px solid var(--primary-color);}
    </style>

    <!-- Responsive table styles -->
    <style type="text/css">
        .reponsive-table-wrapper {
            max-width: 100%; 
            overflow-x: scroll; 
            margin: 0 0 50px;
        }
        .reponsive-table-wrapper::-webkit-scrollbar {
            height: 6px;
            background-color: transparent;
        }
        .reponsive-table-wrapper::-webkit-scrollbar-thumb {
            background: var(--bg-color);
            border-radius: 6px;
        }
        .reponsive-table th {
             min-width: 150px; 
             padding: 10px; 
             border: none; 
             background-color: var(--bg-color);
        }
        @media screen and (max-width: 1060px) {
            .reponsive-table-wrapper {
                overflow: hidden;
            }
            .reponsive-table {
                width: 100%;
            }
            .reponsive-table thead, .reponsive-table th:not([scope="row"]) {
                display: none;
            }
            .reponsive-table th[scope="row"] {
                display: block;
            }
            .reponsive-table td {
                display: block;
                padding: 10px;
                text-align: left;
                padding-left: 30%;
                position: relative;
            }
            .reponsive-table td::before {
                content: attr(data-head) ": ";
                font-weight: 700;
                display: inline-block;
                position: absolute;
                left: 0;
                min-width: 30%;
                padding: 0 10px;
                font-size: 14px;
            }
        }
        @media screen and (max-width: 576px) {
            .reponsive-table td {
                padding: 10px;
            }
            .reponsive-table td::before { 
                padding: 10px 10px 10px 0;
                position: relative;
                display: block;
            }
        }
        </style>
</head>
<body>
    <section class="reponsive-table-wrapper">
        <table class="reponsive-table">
            <tbody>
                <tr>
                    <th scope="col">Name </th>
                    <th scope="col">Description </th>
                    <th scope="col">In <i><a href="/wiki/Design_Patterns_(book)" class="mw-redirect" title="Design Patterns (book)">Design Patterns</a></i></th>
                    <th scope="col">In <i><a href="/wiki/Code_Complete" title="Code Complete">Code Complete</a></i> </th>
                    <th scope="col">Other </th>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Abstract_factory_pattern" title="Abstract factory pattern">Abstract factory</a> </td>
                    <td data-head="">Provide an interface for creating <i>families</i> of related or dependent objects without specifying their concrete classes.</td>
                    <td data-head="">Yes </td>
                    <td data-head="">Yes </td>
                    <td data-head="">N/A </td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Builder_pattern" title="Builder pattern">Builder</a> </td>
                    <td data-head="">Separate the construction of a complex object from its representation, allowing the same construction process to create various representations.</td>
                    <td data-head="">Yes </td>
                    <td data-head="">No </td>
                    <td data-head="">N/A </td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Dependency_injection" title="Dependency injection">Dependency Injection</a> </td>
                    <td data-head="">A class accepts the objects it requires from an injector instead of creating the objects directly. </td>
                    <td data-head="">No </td>
                    <td data-head="">No
                    </td>
                    <td data-head="">N/A
                    </td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Factory_method_pattern" title="Factory method pattern">Factory method</a></td>
                    <td data-head="">Define an interface for creating a <i>single</i> object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses.</td>
                    <td data-head="">Yes </td>
                    <td data-head="">Yes </td>
                    <td data-head="">N/A </td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Lazy_initialization" title="Lazy initialization">Lazy initialization </a> connection pool</td>
                    <td data-head="">Tactic of delaying the creation of an object, the calculation of a value, or some other expensive
                        process until the first time it is needed. This pattern appears in the GoF catalog as "virtual proxy",
                        an implementation strategy for the <a href="/wiki/Proxy_pattern" title="Proxy pattern">Proxy pattern.</a>
                    </td>
                    <td data-head="">No</td>
                    <td data-head="">No</td>
                    <td data-head=""><abbr title="Patterns of Enterprise Application Architecture">PoEAA</abbr></td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Multiton_pattern" title="Multiton pattern">Multiton</a></td>
                    <td data-head="">Ensure a class has only named instances, and provide a global point of access to them.</td>
                    <td data-head="">No</td>
                    <td data-head="">No</td>
                    <td data-head="">N/A</td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Object_pool_pattern" title="Object pool pattern">Object pool</a></td>
                    <td data-head="">Avoid expensive acquisition and release of resources by recycling objects that are no longer in use. Can
                        be considered a generalisation of <a href="/wiki/Connection_pool" title="Connection pool">connection pool</a> and thread pool patterns.
                    </td>
                    <td data-head="">No</td>
                    <td data-head="">No</td>
                    <td data-head="">N/A</td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Prototype_pattern" title="Prototype pattern">Prototype</a>
                    </td>
                    <td data-head="">Specify the kinds of objects to create using a prototypical instance, and create new objects from the
                        'skeleton' of an existing object, thus boosting performance and keeping memory footprints to a minimum.
                    </td>
                    <td data-head="">Yes</td>
                    <td data-head="">No</td>
                    <td data-head="">N/A</td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Resource_Acquisition_Is_Initialization" class="mw-redirect"
                            title="Resource Acquisition Is Initialization">Resource acquisition is initialization</a> (RAII)
                    </td>
                    <td data-head="">Ensure that resources are properly released by tying them to the lifespan of suitable objects.</td>
                    <td data-head="">No</td>
                    <td data-head="">No</td>
                    <td data-head="">N/A</td>
                </tr>
                <tr>
                    <td data-head=""><a href="/wiki/Singleton_pattern" title="Singleton pattern">Singleton</a></td>
                    <td data-head="">Ensure a class has only one instance, and provide a global point of access to it.</td>
                    <td data-head="">Yes</td>
                    <td data-head="">Yes</td>
                    <td data-head="">N/A</td>
                </tr>
            </tbody>
        </table>
    </section>

    <section class="reponsive-table-wrapper">
        <table class="reponsive-table">
            <thead>
            <tr>
                <th></th>
                <th scope="col">First name</th>
                <th scope="col">Last name</th>
                <th scope="col">Age</th>
                <th scope="col">Current work</th>
                <th scope="col">Annual salary</th>
                <th scope="col">Color of the underwear</th>
                <th scope="col">Name of the first pet</th>
                <th scope="col">Shoe size</th>
                <th scope="col">Know CSS transition</th>
                <th scope="col">Know Js Closure</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">The best</th>
                <td data-head="">Bob</td>
                <td data-head="">Marley</td>
                <td data-head="">22</td>
                <td data-head="">Singer</td>
                <td data-head="">200000</td>
                <td data-head="">blue</td>
                <td data-head="">Gil</td>
                <td data-head="">40</td>
                <td data-head="">✅</td>
                <td data-head="">❌</td>
            </tr>
            <tr>
                <th scope="row">The fastest</th>
                <td data-head="">Joe</td>
                <td data-head="">Vanilla</td>
                <td data-head="">44</td>
                <td data-head="">Dev</td>
                <td data-head="">100000</td>
                <td data-head="">white</td>
                <td data-head="">joj</td>
                <td data-head="">39</td>
                <td data-head="">✅</td>
                <td data-head="">✅</td>
            </tr>
            <tr>
                <th scope="row">The least good</th>
                <td data-head="">Gary</td>
                <td data-head="">Silva</td>
                <td data-head="">32</td>
                <td data-head="">QA</td>
                <td data-head="">100000</td>
                <td data-head="">brown</td>
                <td data-head="">gail</td>
                <td data-head="">42</td>
                <td data-head="">❌</td>
                <td data-head="">❌</td>
            </tr>
            </tbody>
        </table>
    </section>

    <!-- Script to set the data attribute from the table head -->
    <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', (event) => {
        const tables = document.querySelectorAll('.reponsive-table');
        
        if (!tables) return;

        tables.forEach(table => {
            let headers = [];

            // Because the table header can be a row or column we need to have the attribute set on them scope="col"
            headers = [...table.querySelectorAll('th[scope=col]')]
                .reduce((items, item) => {
                    items.push(item.textContent);
                    return items;
                }, []);
            
            table.querySelectorAll('td[data-head]').forEach((td, index) => {
                // Add circular logic to get the head titles from the array
                td.dataset.head = headers[index % headers.length];
            })
        });

    });
    </script>
</body>
</html>