How to Make Responsive Div Tables Using CSS (No Table Tag)

Creating responsive tables without relying on the traditional HTML <table> element has become an increasingly popular technique in modern web development. As developers strive to make their pages more accessible, mobile-friendly, and semantically accurate, understanding how to build table-like structures using div elements and CSS is crucial. This article will walk you through step-by-step how to create responsive “div tables” using only CSS and HTML, ensuring they perform well on all devices.

TL;DR:

To create responsive tables using only CSS and divs, start by using a structured HTML layout that mimics table rows and cells. Assign each layer a role like row or cell using class names and style them with display: flex or display: grid. Use media queries and responsive units for optimal performance on different screen sizes. Avoid the native <table> tag for more control over layout and responsiveness.

Why Avoid the Table Tag in Modern Web Design?

Although the <table> tag has its place, especially for displaying tabular data, it can be problematic when it comes to responsiveness. Tables:

• Are rigid and difficult to customize for mobile displays.
• Require nested elements that may not translate well in responsive contexts.
• Provide less control to developers over styling and display behavior.

Instead, using <div> elements to emulate tables with CSS offers greater flexibility and is recommended when accessibility can still be sufficiently addressed through ARIA roles.

Basic Structure of a CSS “Div Table”

To simulate a table, maintain a semantic and hierarchical structure using div elements. Here’s a simple layout:

<div class="table">
  <div class="table-header">
    <div class="table-row">
      <div class="table-cell">Name</div>
      <div class="table-cell">Email</div>
      <div class="table-cell">Role</div>
    </div>
  </div>
  <div class="table-body">
    <div class="table-row">
      <div class="table-cell">Jane Doe</div>
      <div class="table-cell">jane@example.com</div>
      <div class="table-cell">Editor</div>
    </div>
    <div class="table-row">
      <div class="table-cell">John Smith</div>
      <div class="table-cell">john@example.com</div>
      <div class="table-cell">Admin</div>
    </div>
  </div>
</div>

Styling with CSS for Table-like Layout

Use Flexbox or CSS Grid to lay out your cells in a row. Here’s how Flexbox can accomplish this:

.table {
  width: 100%;
  border-collapse: collapse;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}

.table-header .table-row {
  font-weight: bold;
  background-color: #f2f2f2;
}

.table-cell {
  flex: 1;
  padding: 10px;
  min-width: 100px;
}

In this setup:

• .table acts as the container for all rows.
• .table-row is used to organize cells horizontally.
• .table-cell adjusts dynamically in width using Flexbox’s properties.

Making the Table Responsive

Your goal is to ensure that on mobile and smaller screen sizes, your table layout remains readable. One of the most effective techniques is converting table rows into blocks and stacking the cells vertically.

Use media queries to adjust your layout on smaller screens:

@media screen and (max-width: 768px) {
  .table-row {
    flex-direction: column;
    border-bottom: 2px solid #ddd;
  }

  .table-cell {
    padding: 8px 12px;
    border: none;
    position: relative;
  }

  .table-cell::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }
}

To make this work, update your HTML cells to include data-label attributes:

<div class="table-cell" data-label="Name">Jane Doe</div>

This ensures context is preserved when cells stack, mimicking a “label:value” structure users expect on small displays.

Optional: Use CSS Grid for More Advanced Layouts

CSS Grid offers precise column control and easy reordering, useful in advanced layouts. Here’s a basic example:

.table-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #ccc;
}

With grid-template-columns, you can define exact column proportions or sizes. This is particularly helpful when some columns require more space than others.

Handling Overflow and Horizontal Scrolling

In real-world scenarios, tables often have more content than can fit on a screen. Some developers prefer to keep the table structure intact and allow horizontal scroll on small screens:

.table {
  overflow-x: auto;
  display: block;
}

This style adds a scrollbar that makes it possible for users to explore wide tables without breaking the layout.

We recommend combining this method with media queries for the best user experience. Depending on your content, you might let some tables scroll while others stack into blocks.

Enhancing Accessibility with ARIA Roles

One disadvantage of using divs instead of <table> tags is the loss of semantic meaning, which can hurt accessibility. To address this, you can assign ARIA roles:

• role="table" for the outer container
• role="rowgroup" for headers and body
• role="row" for each row
• role="cell" and role="columnheader" as appropriate

Here is an example:

<div class="table" role="table">
  <div class="table-header" role="rowgroup">
    <div class="table-row" role="row">
      <div class="table-cell" role="columnheader">Name</div>
    </div>
  </div>
</div>

Adding ARIA roles creates an improved experience for screen reader users, making your layout not only beautiful but also inclusive.

Use Cases Where Div Tables Shine

Responsive div tables can be used effectively in many web development scenarios, including:

• Dashboards: where data needs to be shown in widget-style cards on mobile.
• Embedded Widgets: where space constraints make regular tables cumbersome.
• Admin Templates: for greater styling flexibility and responsive behavior.

In all these cases, custom styling and responsiveness outshine what native tables can offer.

Best Practices

Follow these tips to get the best results from your CSS-based div tables:

• Use semantic HTML wherever possible; layer accessibility with ARIA when needed.
• Ensure consistency in cell widths using min-widths or consistent padding.
• Test on various devices and use browser dev tools to simulate different screens.
• Don’t forget performance— excessive nested divs can impact readability and load speed.

Conclusion

Responsive “div tables” using CSS are an excellent alternative to traditional table layouts, especially for mobile-first and flexible design needs.