Responsive tables with CSS

Tables are a design pattern for displaying large amounts of data in strings and columns, making them a very visual and efficient way to display data. From the beginning, the web has supported the display of data in a tabular format. HTML tables present tabular data in a semantically and structurally appropriate way. However, the default styles in HTML tables are not well suited for display on mobile devices.

As an example, I show you this column table with the following styles:

  .container{
    padding: 4em;
    margin: 0 auto;
    width: 100%;
    max-width: 60rem;
  }
  
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    font-size: 1.6rem;
  } 
  
  td, th {
    border: 1px solid #9a9a9a;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  

On mobile devices, where the available width is much smaller, displaying table data involves reducing the font size. In cases where the table contains a significant number of columns, reading the data becomes considerably difficult. Obviously, we can resort to "zooming" the screen itself, but this should not be the solution.

Solution 1: Apply Horizontal Scroll

One option is to apply a horizontal scroll that is visible in those cases where the available width is less than the total width of the table:

  .container{
      overflow-x: auto;
  }
  
  /* Customize Scroll */
  /* Width */
  ::-webkit-scrollbar {
      width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
      background: #f1f1f1;
      box-shadow: inset 0 0 5px grey;
      border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: rgb(100, 100, 100);
      border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: rgb(80, 80, 80);
  }
  

Solution 2: Add styles to make the table responsive

To achieve styles that display the fields of each table record vertically and with 100% of the available width, you must add the following attribute "data-cell" (the name can be similar) to all the fields of each row of the table. This attribute must contain the name of the field to which the data belongs. The following code is an example for one of the table records:

The CSS pseudo-element "before" allows us to access the attributes of each element of the table. Taking advantage of the fact that we have included the attribute "data-cell" with the name of the field in each record, we can add styles to the elements of the table for display on mobile devices:

  @media(max-with: 650px) {
    .container {
      padding: 2em;
    }
    th{
      display: none;
    }
    td{
      display: block;
    }
      td::before {
          content: attr(data-cell) ": ";
          font-weight: 700;
          text-transform: capitalize;
      }
  }
  

The result of the table display for mobile devices is the following:

Responsive layout data tables only with Css. Using the pseudo-element: "before"