Responsive Tables

Page Speed Checklist

Adapt Tables To Small Screens

<table>s with many columns or long cell contents can overflow their container and cause horizontal scrolling on smaller screens. Reconfigure tabular data into a mobile friendly, single-column layout.

A data attribute on each content cell stores the value of the corresponding header cell:

            <th>Column Label A</th>
            <th>Column Label B</th>
            <th>Column Label C</th>
            <td data-th="Column Label A">Content Cell A</td>
            <td data-th="Column Label B">Content Cell B</td>
            <td data-th="Column Label C">Content Cell C</td>

Along with styling to hide the header row and rearrange the structure of table elements, the values of these data attributes can then be accessed and displayed with a CSS pseudo element:

@media (max-width:749px) {
    table, tbody, tr, th, td {display:block}
        thead {display:none}
            td::before {content:attr(data-th)": "}

Live Example

Change the width of the screen to switch layouts:

Common Name Scientific Name Class Order Family
Mountain Lion Puma Concolor Mammalia Carnivora Felidae
Mediterranean Gecko Hemidactylus Turcicus Reptilia Squamata Gekkonidae
Greater Roadrunner Geococcyx Californianus Aves Cuculiformes Cuculidae
Killer Whale Orcinus Orca Mammalia Artiodactyla Delphinidae

Beyond this simple example, the layout and styling can be customized as desired in any number of more complex configurations including multiple columns. The data attributes themselves can also be added and used selectively.


The data attribute technique is a good solution when a <table> is the only option. Depending on the content and desired layouts across screen sizes, in many cases a better alternative (in part, for improved accessibility) is to replace the <table> altogether with other elements like headings and generic containers for even more layout flexibility.

Responsive Embedded Videos

Set up embedded videos to be responsive and scale with the browser:

Responsive Embedded Videos