CSS-only responsive table solution to convert the regular normal HTML table into collected blocks.
responsive table html css, responsive vertical table, responsive table with css grid, html css table codepen, responsive table css demo
How to make use of it:
Add the feature of “expecting data” to the table heads as follows:
<table class="responsive"> <thead> <tr> <th>#</th> <th>code</th> <th>name</th> <th>actions</th> </tr> </thead> <tbody> <tr> <td data-label="#">1</td> <td data-label="code">101</td> <td data-label="name">john doe</td> <td data-label="actions"><ul class="actions"> <li> <a href="#">view</a> </li> <li> <a href="#">edit</a> </li> <li> <a href="#">delete</a> </li> </ul></td> </tr> <tr> <td data-label="#">2</td> <td data-label="code">102</td> <td data-label="name">jane doe</td> <td data-label="actions"><ul class="actions"> <li> <a href="#">view</a> </li> <li> <a href="#">edit</a> </li> <li> <a href="#">delete</a> </li> </ul></td> </tr> <tr> <td data-label="#">3</td> <td data-label="code">103</td> <td data-label="name">anonymous other</td> <td data-label="actions"><ul class="actions"> <li> <a href="#">view</a> </li> <li> <a href="#">edit</a> </li> <li> <a href="#">delete</a> </li> </ul></td> </tr> </tbody> </table>
Then enter the responsive table. CSS in the document’s head section.
<link rel="stylesheet" href="styles/responsive-table.css">
pure css responsive html table, responsive-tables Plugin/Github
See Demo And Download
Official Website(eebrah): Click Here
This superior jQuery/javascript plugin is developed by eebrah. For extra advanced usage, please go to the official website.