DEV Community

Cover image for Responsive Table Using Vanilla CSS Only for Better User-Experience
Designing Coder
Designing Coder

Posted on • Updated on • Originally published at designingcoder.hashnode.dev

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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

Table View

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;
    }
Enter fullscreen mode Exit fullscreen mode

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:";
      }
Enter fullscreen mode Exit fullscreen mode

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

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

Mobile View

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

Discussion (0)