Responsive Table Using Vanilla CSS Only for Better User-Experience
Tags: table, css, responsive, html
Published: 2021-04-28 08:31:51

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.



``` html
    <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.
<br />

```css
	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.

![Table View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54zo7ej4fil7887zy8bz.png)

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)`.

```css
	.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.

```css
	  .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.

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

![Mobile View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un242we56v2sejkvlsui.png)

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

{% youtube pwtd4Bvp9hA %}