i did a simple version of this before here but now im going to make it a bit more complicated and functional.

Basic Table Markup

<style>
table { 
  width: 100%; 
  border-collapse: collapse; 
}
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}	
</style>

<table id="demotable">
	<thead>
		<tr>
			<th>Title One</th>
			<th>Title Two</th>
			<th>Title Three</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>some</td>
			<td>example</td>
			<td>data</td>
		</tr>
		<tr>
			<td>some example data</td>
			<td>some example data</td>
			<td>some example data</td>
		</tr>
		<tr>
			<td>some more example data</td>
			<td>some more example data</td>
			<td>some more example data</td>
		</tr>
	</tbody>
</table>

Make it responsive

<style>
@media(max-width:800px) {
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	thead tr { 
		display:none;
	}
	tr { border: 1px solid #ccc; }
	
	td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	/* Add labels */
	td:nth-of-type(1):before { content: "Title One"; }
	td:nth-of-type(2):before { content: "Title Two"; }
	td:nth-of-type(3):before { content: "Title Three"; }
}
</style>

Example Video

Related Links

Example Video

Css Tricks