Responsive Table in HTML

Creating responsive tables in HTML ensures that they adapt well to different screen sizes and devices.
Responsive design is crucial for providing a seamless user experience across various devices, including desktops, tablets, and smartphones.
Let's explore the strategies and examples of making tables responsive in HTML to cover all scenarios.

1. Basic Responsive Table:

The simplest approach to creating a responsive table is by using CSS media queries:

<style>
  @media only screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr { 
      display: block; 
    }
    th { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td { 
      border: none;
      border-bottom: 1px solid #eee; 
      position: relative;
      padding-left: 50%; 
    }
    td:before { 
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
    }
    td:nth-of-type(1):before { content: "Column 1:"; }
    td:nth-of-type(2):before { content: "Column 2:"; }
    td:nth-of-type(3):before { content: "Column 3:"; }
  }
</style>

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

2. Horizontal Scroll:

If the table content is too wide for smaller screens, you can enable horizontal scrolling:

<style>
  table {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
</style>

3. Collapsible Rows:

Another approach is to collapse rows into expandable sections:

<style>
  .collapsible {
    cursor: pointer;
    user-select: none;
  }
  .content {
    display: none;
    overflow: hidden;
  }
</style>

<script>
  function toggleContent() {
    var content = document.getElementById("content");
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  }
</script>

<div class="collapsible" onclick="toggleContent()">Show Details</div>
<div class="content" id="content">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>

4. Use Cases:

Responsive tables are essential for presenting tabular data in a user-friendly manner on various devices.
They're commonly used in web applications, dashboards, and reports to ensure readability and accessibility.
Responsive tables facilitate seamless data viewing and interaction, enhancing the overall user experience.
They adapt to different screen sizes and orientations, making them suitable for both desktop and mobile devices.

Conclusion:

Creating responsive tables in HTML is crucial for ensuring optimal user experience across different devices. By implementing various strategies and examples, you can design tables that adapt well to various screen sizes and orientations.

Experiment with different responsive techniques, such as media queries, horizontal scrolling, and collapsible rows, to create tables that meet your specific requirements. With practice, you'll become proficient in building responsive tables that enhance the usability and accessibility of your web content.

Archive

HTML Responsive Table