more complex responsive tables css

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

Title One Title Two Title Three
some example data
some example data some example data some example data
some more example data some more example data some more example data

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

Demo

Other Items in css
Page Views

This page has been viewed 236 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹