this content was originally posted here.

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

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:01pZf
$p4:more-complex-responsive-tables-css
$p5:
$p6:
$p:/view/code/01pZf/more-complex-responsive-tables-css/
Using Template: view-code.html