Responsive Table Design

Posted on November 8, 2014 by

Don't let tables break your responsive layout anymore. This simple HTML/CSS combo will let your tables adapt to small device screens without everything going to hell.


Device Width : 1280px

Screen shot of responsive table, Device width: 1280px

Screen shot of responsive table, Device width: 980px

Device Width : 980px

Device Width : 800px

Screen shot of responsive table, Device width: 800px
Screen shot of responsive table, Device width: 320px

Device Width : 320px


Minimum and maximize the browser no see the responsiveness.

# Name Date Of Birth Gender Department Section Fee CGPA
1 Janet Baker 18-12-1994 M CSE B2 $5000 8.45
2 Darren Kirk 20-12-1993 M ECE D2 $6000 6
3 Sherly Brown 03-12-1994 F CSE B3 $4500 7.5
4 Ravi Patel 21-12-1994 M Civil F1 $7599 9


		<title>Responsive Table</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="utf-8">
			background-color: #f9f9f9;
			border-collapse: collapse;
			color: black;
			margin: 1em 0;
			text-align: center;
		table tr:nth-child(odd){ 
			background-color: #faf5ff;

		table tr th{
			background-color: #E0CEF2; border-color: #B1A3BF
		table tr th, table tr td{
			border: 1px solid #aaa;
		@media only screen and (max-width: 800px) {
			/* Force table to not be like tables anymore */
			#no-more-tables table,
			#no-more-tables thead,
			#no-more-tables tbody,
			#no-more-tables th,
			#no-more-tables td,
			#no-more-tables tr {
					display: block;
			/* Hide table headers (but not display: none;, for accessibility)  */
			#no-more-tables thead tr {
				position: absolute;
				top: -9999px;
				left: -9999px;

			/* Behave like a "row" */
			#no-more-tables td:not(:first-child) {
				position: relative;
				padding-left: 52%;
				text-align: left;
				border-collapse: collapse;
				border-bottom: 0px;
			#no-more-tables td:first-child{
				text-align: center;
				border-collapse: collapse;
				border-bottom: 0px;
				background-color: blueviolet;
			#no-more-tables td:last-child {
				border: 1px solid #aaa;
			#no-more-tables tr{
				margin-bottom: 10px;

			/* Now like a table header */
			#no-more-tables td:not(:first-child):before {
				position: absolute;
				left: 0;
				top: 0;
				width: 48%;
				padding-left: 2%;
				background-color: #E0CEF2; 
				border-right: 1px solid #aaa;
				white-space: wrap;
				text-align: left;
				font-weight: bold;
				content: attr(data-title);
  <body >
  <div id="no-more-tables">
          <th>Date Of Birth</th>
          <td data-title="#">1</td>
          <td data-title="Name">Janet Baker</td>
          <td data-title="Date Of Birth">18-12-1994</td>
          <td data-title="Gender">M</td>
          <td data-title="Department">CSE</td>
          <td data-title="Section">B2</td>
          <td data-title="Fee">$5000</td>
		  <td data-title="CGPA">8.45</td>
          <td data-title="#">2</td>
          <td data-title="Name">Darren Kirk</td>
          <td data-title="Date Of Birth">20-12-1993</td>
          <td data-title="Gender">M</td>
          <td data-title="Department">ECE</td>
          <td data-title="Section">D2</td>
          <td data-title="Fee">$6000</td>
		  <td data-title="CGPA">6</td>
          <td data-title="#">3</td>
          <td data-title="Name">Sherly Brown</td>
          <td data-title="Date Of Birth">03-12-1994</td>
          <td data-title="Gender">F</td>
          <td data-title="Department">CSE</td>
          <td data-title="Section">B3</td>
          <td data-title="Fee">$4500</td>
		   <td data-title="CGPA">7.5</td>
          <td data-title="#">4</td>
          <td data-title="Name">Ravi Patel</td>
          <td data-title="Date Of Birth">21-12-1994</td>
          <td data-title="Gender">M</td>
          <td data-title="Department">Civil</td>
          <td data-title="Section">F1</td>
          <td data-title="Fee">$7599</td>
		   <td data-title="CGPA">9</td>

Fork Download

This website is made possible by displaying online advertisements to our visitors.
Please consider supporting by disabling your ad blocker.
loading comments...