Responsive Design in Tables

The journey of responsive design is always full of experimentation and fun. The most important challenge is to provide an application that works on all screen sizes.
In this article, we will make a table responsive keeping some best UI/UX approaches in mind.

Problem

When we have many rows and columns inside a table, browser introduces a horizontal scrollbar on small-screen devices which affects the User experience. There are many options to solve this issue:

• Decreasing font-size on small screens : It fails as it also affects visibility.
• Hiding some columns and rows which are not much important: It fails as any loss of information is not a good idea.

Approach

There can be other approaches to solve this issue, but the best way can be to do this with CSS only.

Writing basic HTML and CSS for table.

 <table>
        <thead>
            <tr>
                <th>Year</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Section</th>
                <th>Roll number</th>
                <th>Marks</th>
                <th>Position</th>
                <th>Discipline</th>
                <th>Sports</th>
                <th>Weight</th>
                <th>Height</th>
                <th>Attendance</th>
            </tr>
         </thead>
        <tbody>
            <tr>
                <th>Ist</th>
                <td>Foo</td>
                <td>bar</td>
                <td>II</td>
                <td>1209112002</td>
                <td>95/100</td>
                <td>1</td>
                <td>A</td>
                <td>B</td>
                <td>60</td>
                <td>5'</td>
                <td>95%</td>
            </tr>
            <tr>
                <th>IInd</th>
                <td>James</td>
                <td>Doe</td>
                <td>II</td>
                <td>1209112002</td>
                <td>85/100</td>
                <td>2</td>
                <td>C</td>
                <td>B</td>
                <td>69</td>
                <td>6'</td>
                <td>85%</td>
            </tr>
            <tr>
                <th>IIIrd</th>
                <td>Jennifer</td>
                <td>Jen</td>
                <td>III</td>
                <td>1209112006</td>
                <td>89/100</td>
                <td>3</td>
                <td>A</td>
                <td>B</td>
                <td>72</td>
                <td>6'</td>
                <td>90%</td>
            </tr>
        </tbody>
    </table>

This will give us a layout of a simple table and we can write some styling in CSS to make it more cleaner.

  @import url('https://fonts.googleapis.com/css?family=Roboto:300');

  * {
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
  }

  table {
      width: 100%;
      font-size: 14px;
      color: black;
  }

  thead {
      background-color: black;
      color: white;
  }

  th,td {
      text-align: center;
      border: 0;
      border-bottom: 1px solid gray;
      height: 50px;
      border-right: 1px solid gray;
  }

This gives a simple table on Desktop which will not be fully-responsive and will introduce a scrollbar on smaller devices.

The CSS Magic

CSS has some beautiful elements such as nth-child() and content: "" which we will use here. The nth-child( number or expression ) is used to select any element from a set of elements such as a list to add styles. The content element can append a string value inside the existing DOM node.

 @media (max-width: 700px) {
      th, td {
          display: block;
          float: left;
      }

      th {
          width: 100%;
          background-color: #000;
          color: white;
          padding-top: 10px;
      }

      td {
          width: 33.33%;
      }

      thead th {
          display: none;
      }

      td::before {
          display: block;
          font-weight: bold;
          margin-top: .33em;
          margin-bottom: .33em;
      }

      td:nth-child(2):before {
          content: "First Name";
      }

      td:nth-child(3):before {
          content: "Last Name";
      }

      td:nth-child(4):before {
          content: "Section";
      }

      td:nth-child(5):before {
          content: "Roll Number";
      }

      td:nth-child(6):before {
          content: "Marks";
      }

      td:nth-child(7):before {
          content: "Position";
      }

      td:nth-child(8):before {
          content: "Discipline";
      }

      td:nth-child(9):before {
          content: "Sports";
      }

      td:nth-child(10):before {
          content: "Weight";
      }

      td:nth-child(11):before {
          content: "Height";
      }

      td:nth-child(12):before {
          content: "Attendance";
      }
  }

  @media (min-width: 501px) and (max-width: 700px) {
      td {
          width: 25%;
      }
  }

When the screen width is less than 700px playing around with some float and than hiding all thead th elements and adding their content using css content tag inside an existing DOM element is the most interesting stuff here.

On Desktop

On Tablets

On Mobiles

Conclusion

Designing responsive tables has always been a challenge in web design, this approach can provide better experiences on small screens but can be used only when the table size is known. For dynamic tables, where the data from the server can change the table size, the scrollbar and content hiding approach work best.

Code: https://github.com/aayusharora/ResponsiveTable