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.