HTML and CSS

Responsive Data Tables

Demo of responsive data tables in IE9

HTML tables are a bit of a pain when it comes to responsive web design. A large table with lots of columns will look good on a wide screen, but on a small mobile screen they suck. This is the demo of the blog post about this.

Responsive tabular data – tested in Chrome, Firefox, IE9, Opera and Safari. Based on Responsive Data Tables by CSS Tricks.

With help from:

Row based data table

Fruit Type of grape Dried Seedless Dry colour

Raisin

white dark

Sultana

white golden

Currant

black dark

Column based data table

fruit

Type of grape Dried Seedless Dry colour

Raisin

white dark

Sultana

white golden

Currant

black dark

css

									
										
/**
 * ------------------------------------------------------------------------------- 
 * TABLES: Row based
 * -------------------------------------------------------------------------------
 */

.responsive-tables__rows { 
   width: 100%; 
   margin-bottom: 3.5em; 
   padding-bottom: 3.5em;
   border-bottom: 1px solid #ccc;
}
.responsive-tables__rows thead { display: none; } 

.responsive-tables__rows tr {
	width: 100%; 
	float: left; 
	display: block;
	padding: 1em 0.5em;
	border-bottom: 1px solid #999;
}

.responsive-tables__rows td {
	width: 100%;
	float: left;
	display: block;
	text-align: left;
	padding: 0 0 0.3em 45%;
	position: relative;
}

.responsive-tables__rows tbody td:nth-of-type(odd) {
	background: #c2c0bb;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.responsive-tables__rows tbody td:nth-of-type(1) {
	background: none;
	border: none;
}

.responsive-tables__rows td:before {
	width: 7em;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.responsive-tables__rows td:nth-of-type(2):before { content: "Type of grape"; }
.responsive-tables__rows td:nth-of-type(3):before { content: "Dried"; }
.responsive-tables__rows td:nth-of-type(4):before { content: "Seedless"; }
.responsive-tables__rows td:nth-of-type(5):before { content: "Dry colour"; }


@media screen and (min-width: 700px)  {	

	.responsive-tables__rows thead { 
		display: block; 
		padding: 0 0 1.5em 0; 
		margin: 0 0 1em 0; 
	}

	.responsive-tables__rows thead tr { border-bottom: 1px solid #ddd; }
	.responsive-tables__rows #fruit { text-indent: -999em; }
	
	.responsive-tables__rows tr { 
		border-bottom: none; 
		padding: 0; 
	}
	
	.responsive-tables__rows tbody tr:nth-of-type(even) { 
		background: #c2c0bb;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
	}

	.responsive-tables__rows th, 
	.responsive-tables__rows td {
		width: 20%;
		//height: 2em;
		float: left;
		text-align: center;
		padding: 0.5em 0 0.3em 0;
	}
	
	.responsive-tables__rows tbody td:nth-of-type(n) {
		background: none;
		border: none;
	}

	.responsive-tables__rows td:nth-of-type(n):before { content: ""; }
	
}

/**
 * ------------------------------------------------------------------------------- 
 * TABLES: Column based
 * -------------------------------------------------------------------------------
 */

.responsive-tables__columns { width: 100%; }

.responsive-tables__columns tr {
	width: 100%;
	float: left;
	display: block;
	margin: 0 0 1.5em 0;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #333;
}

.responsive-tables__columns tr:first-of-type { 
	position: absolute;
	top: -999em;
	left: -999em;
}

.responsive-tables__columns td {
	width: 100%;
	display: block;
	float: left;
	clear: both;
	text-align: left;
	padding: 0.3em 0 0.3em 40%;
	position: relative;
}

.responsive-tables__columns td:nth-child(2n+1) { 
	background: #c2c0bb; 
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.responsive-tables__columns td:before {
	width: 7em;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.responsive-tables__columns td:nth-of-type(1):before { content: "Type of grape"; }
.responsive-tables__columns td:nth-of-type(2):before { content: "Dried"; }
.responsive-tables__columns td:nth-of-type(3):before { content: "Seedless"; }
.responsive-tables__columns td:nth-of-type(4):before { content: "Dry colour"; }

@media screen and (min-width: 700px){
	
	.responsive-tables__columns tr {
		width: 25%;
		float: left;
		margin: 0;
		padding: 0;
		border-bottom: none;
	}
	
	.responsive-tables__columns tr:first-of-type { 
		position: relative;
		top: 0;
		left: 0;
	}
	
	.responsive-tables__columns th, 
	.responsive-tables__columns td {
		width: 100%;
		display: block;
		float: left;
		clear: both; 
		padding: 0.5em; 
		text-align:center;
	}
	
	.responsive-tables__columns #features { text-indent: -999em; }
	
	.responsive-tables__columns td:nth-of-type(n):before { content:""; }

}


/* for IE 8 and below */
.ie .responsive-tables__columns tr { width: 25%; border-bottom: none; }
.ie .responsive-tables__columns td { border-bottom: 1px solid #ccc; }

.ie .responsive-tables__columns #features { text-indent: -999em; }

.ie .responsive-tables__columns #features, 
.ie .responsive-tables__columns #raisin, 
.ie .responsive-tables__columns #sultana, 
.ie .responsive-tables__columns #currant {
	margin: 0 0 1em 0;
	border-bottom: none;
}

/* for IE 7 and 6 */
#ie7 .responsive-tables__columns th,
#ie6 .responsive-tables__columns th {
	width: 20%;
	font-size: 90%;
	text-align: center;
	border-bottom: 1px solid #999; 
}

#ie7 .responsive-tables__columns td,
#ie6 .responsive-tables__columns td { width: 20%; text-align: center; }


	    							
	    						

html

									
										
<section class="responsive-tables">
   <h2>Row based data table</h2>
   <table class="responsive-tables__rows">
      <thead>
         <tr>
            <th id="fruit">Fruit</th>
            <th id="grape">Type of grape</th>
            <th id="dry">Dried</th>
            <th id="seeds">Seedless</th>
            <th id="colour">Dry colour</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td headers="fruit"><h4>Raisin</h4></td>
            <td headers="grape">white</td>
            <td headers="dry">&check;</td>
            <td headers="seeds">&cross;</td>
            <td headers="colour">dark</td>
         </tr>
         <tr>
            <td headers="fruit"><h4>Sultana</h4></td>
            <td headers="grape">white</td>
            <td headers="dry">&check;</td>
            <td headers="seeds">&check;</td>
            <td headers="colour">golden</td>
         </tr>
         <tr>
            <td headers="fruit"><h4>Currant</h4></td>
            <td headers="grape">black</td>
            <td headers="dry">&check;</td>
            <td headers="seeds">&check;</td>
            <td headers="colour">dark</td>
         </tr>
      </tbody>
   </table>

   <h2>Column based data table</h2>
   <table class="responsive-tables__columns">
      <tr>
         <th id="features"><h4>fruit</h4></th>
         <td id="grape" headers="features">Type of grape</td>
         <td id="dried" headers="features">Dried</td>
         <td id="seeds" headers="features">Seedless</td>
         <td id="colour" headers="features">Dry colour</td>
      </tr>
      <tr>
         <th id="raisin" headers="features"><h4>Raisin</h4></th>
         <td headers="raisin grape">white</td>
         <td headers="raisin dried">&check;</td>
         <td headers="raisin seeds">&cross;</td>
         <td headers="raisin colour">dark</td>
      </tr>
      <tr>
         <th id="sultana" headers="features"><h4>Sultana</h4></th>
         <td headers="sultana grape">white</td>
         <td headers="sultana dried">&check;</td>
         <td headers="sultana seeds">&check;</td>
         <td headers="sultana colour">golden</td>
      </tr>
      <tr>
         <th id="currant" headers="features"><h4>Currant</h4></th>
         <td headers="currant grape">black</td>
         <td headers="currant dried">&check;</td>
         <td headers="currant seeds">&check;</td>
         <td headers="currant colour">dark</td>
      </tr>
   </table>
</section>