Responsive Table Using Vanilla CSS Only for Better User-Experience

Usually the table we make does not provide good user experience in terms of data visualisation. So in this article I am going to share my approach for making a better responsive table for data-visualisation.

If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step 1: Setting up table content in html.

Instead of using traditional HTML tags, I am going to use similar class names. No special reasons just personal preference.

Let's consider a dummy data in which we have details for printing a company's employee Id-card.

    <div class="caption">Employee Details</div>
    <div class="table">
      <div class="th">
          <div class="td">Name</div>
          <div class="td">DoB</div>
          <div class="td">Specialization</div>
          <div class="td">Blood Group</div>
          <div class="td">Emergency Contact</div>
      </div>
      <div class="tbody">
        <div class="tr">
          <div class="td">John</div>
          <div class="td">10/09/1993</div>
          <div class="td">UI/UX Designer</div>
          <div class="td">O+</div>
          <div class="td">98765 43210</div>
        </div>
        <div class="tr">
          <div class="td">Doe</div>
          <div class="td">01/01/2000</div>
          <div class="td">Network Architecture</div>
          <div class="td">A+</div>
          <div class="td">87654 32109</div>
        </div>
        <div class="tr">
          <div class="td">Jane</div>
          <div class="td">09/10/1999</div>
          <div class="td">Frontend Developer</div>
          <div class="td">B+</div>
          <div class="td">76543 21098</div>
        </div>
        <div class="tr">
          <div class="td">Satoshi</div>
          <div class="td">20/08/1999</div>
          <div class="td">Backend Developer</div>
          <div class="td">AB+</div>
          <div class="td">65432 10987</div>
        </div>
        <div class="tr">
          <div class="td">Nakamoto</div>
          <div class="td">14/10/1983</div>
          <div class="td">Fullstack Developer</div>
          <div class="td">O-</div>
          <div class="td">54321 09876</div>
        </div>
      </div>
    </div>

Step 2: Styling the classes for a table look

Let's have a zebra stripe table and assign different color to the header and also assign equal width to each column.

    body {
      font-family: arial;
    }
    .caption {
      font-size: 30px;
      font-weight: bold;
      margin: 25px;
      text-align: center;
    }
    .tr {
      display: flex;
    }
    .th {
      display: flex;
      background: mediumblue;
      color: white;
    }
    .td {
      width: 20%;
      border: 1px solid #777;
      padding: 10px;
    }
    .tr:nth-of-type(even) {
      background: #efefef;
    }

Now we have a basic table. You can resize your screen and see how bad is the user experience for small screens.

Let's make it look better for small screens also.

Step 3: Hiding Header and Changing Table View

We will change to single column and multi row view for each data set. From here we will write styling for @media (max-width: 600px), (max-device-width: 600px).

    .th {
        display: none;
    }
    .tr {
        display: block;
        margin-bottom: 25px;
        background: transparent !important;
    }
    .td {
        background: #f0f0f0;
        display: flex;
        width: 90%;
        margin: auto;
    }

Step 4: Adding header and data labels

We will consider the first row of each set as the header and color it different for better visualisation.

      .td:nth-of-type(1) {
        content: "Name:";
        background: mediumblue;
        color: white;
        font-weight: bold;
      }
      .td:before {
        font-weight: bold;
        display: block;
        width: 50%;
      }
      .td:nth-of-type(2):before {
        content: "DoB:";
      }
      .td:nth-of-type(3):before {
        content: "Specialization:";
      }
      .td:nth-of-type(4):before {
        content: "Blood Group:";
      }
      .td:nth-of-type(5):before {
        content: "Emergency Contact:";
      }

Step 5: Fixing font-size and padding for all devices.

    @media (max-device-width: 600px) {
      .table {
        font-size: 2rem;
      }
      .td {
        padding: 20px;
      }
    }

Finally, we can change the screen size and still our data is easy to understand.

Thankyou for reading. Please feel free to drop your opinion or any helpful tips.

Social Media Links: https://designingcoder.github.io