Responsive Table Layout Implemented with Pure CSS

Add-ons

2026-07-26 03:28 3 次浏览 • 0 次下载 1.1KB

Responsive Table Layout Implemented with Pure CSS

Plugin Description: How can we make table elements responsive as well? According to HTML5 guidelines, table is a discouraged HTML element. However, in real-world development, we occasionally cannot avoid using it. So, how can we make a traditional table responsive?

Resize the browser window or try viewing this page on devices with different screen sizes (PC and mobile). You will notice that the table below features a responsive layout. It automatically adapts to different screen sizes, ensuring that the data remains properly displayed regardless of screen size.

Today, we're going to discuss one of the challenging problems in responsive layout technology: how to make table elements responsive. According to HTML5 guidelines, table is a discouraged HTML element. However, in real-world development, we occasionally cannot avoid using it. So, how can we make a traditional table responsive?

There are many solutions available online, and the most common approach involves JavaScript. CSS-Tricks provides a pure CSS solution, but it requires writing some business data directly into CSS. The method introduced in this article also uses pure CSS to implement a responsive table layout, but CSS is only responsible for presentation and does not involve business logic or data.

Suppose we have a requirement to display payment data in a table. Here is the table and data we use:

<table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>

Using Pseudo-Elements and Custom Attributes

We will leverage the power of the pseudo-elements :before and :after. They are commonly used to display icon-like content, such as arrows, hints, or text symbols (icons). Another useful feature is displaying an element's attribute value in HTML content using content: attr(data-label), which can be placed inside before/after pseudo-element rules. Following this approach, we can make tables look like grids on desktop screens and switch to a fluid layout on smaller mobile screens.

We will temporarily use 600px as the breakpoint between small and large screens. The CSS below uses a media query to extract attribute values from td elements and display them in the content area on screens narrower than 600px.

@media screen and (max-width: 600px) {
  table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}

This is how it looks on larger screens:

And this is how it looks on mobile devices:

When the viewport width is less than 600px, the responsive layout conditions are triggered, and the table switches to a fluid layout. You can also test this webpage on both PC and mobile devices. This achieves a perfect responsive layout.