Make Your Large Horizontal HTML Tables Mobile-Friendly

Have you ever tried to read a table on your phone that is wider than the screen? It’s like playing a game of ping-pong with your fingers, scrolling left and right, up and down, trying to catch all the data. It’s not fun, it’s frustrating. And it’s bad for your blog’s SEO too, because Google doesn’t like tables that make users work hard. That’s why you get the error Mobile Usability > Content wider than screen on Google search console.

But don’t worry, there is a solution. You can make your tables look good and be easy to use on small screens with some simple tricks. In this post, we’ll show you how to do that and improve your blog’s SEO at the same time.

.table-scroll {
  overflow-x: auto;
}

<div class="table-scroll">
<table class="table">
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>
</div>

Output Result ➥

Here is how the table will look in mobile, the table is horizontally scrollable.