Tables automatically convert to ul on mobile devices

Add-ons

2026-07-26 03:51 8 次浏览 • 0 次下载 1.4KB

Tables automatically convert to ul on mobile devices

Plugin Description: Solves the responsive layout problem caused by long table fields on mobile devices. Tables are displayed as tables on desktop and as unordered lists (ul) on mobile devices.

Usage

Include jQuery and table.js

1 2	`<script` `src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>` `<script` `src="js/table.js"></script>`

html

<div class="table-list">
    <table>
        <thead>
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
                <th>Title 3</th>
                <th>Title 4</th>
                <th>Title 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content 1</td>
                <td>Content 2</td>
                <td>Content 3</td>
                <td>Content 4</td>
                <td>Content 5</td>
            </tr>
        </tbody>
    </table>
</div>

Call the plugin

1	`$(".table-list").setTable();`