Responsive tables in BC

There are lots of other methods out there, some use javascript solutions to keep the essence of a table in tact and adjusting based on window width but this sollution is one of the easier to implement.

The concept to make a table responsive is very basic, they key is understanding html elements. a div is a block level element, a span is not, its an inline element. A table is a table element, some CSS hacks or IE fixing solutions will have you set div elements as table or table cell elements through display:table; for example.

You can do this in reverse, if you convert all your table elements into block level, then apply some table styles as you need to, maybe use the :before to add the titles back in, hide or show the header.... It allows you to create a nice responsive table solution

The Html

You can add your custom style classes to your tables as well, not use a class and have the CSS run by default on all tables, or target a table based on its existing class or ID, or... Add your own.

<table class="responsive-table">
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Job Title</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Liam</td>
		<td>Dilley</td>
		<td>Website Guru</td>
	</tr>
	<tr>
		<td>Adam</td>
		<td>Broadway</td>
		<td>Legend</td>
	</tr>
	</tbody>
</table>

The CSS

Place this within your CSS media query code.

  /* ============ RESPONSIVE TABLE ============= */
  /* Force table to not be like tables anymore */
	table.responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.responsive-table tr { border: 1px solid #ccc; }
	
	.responsive-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.responsive-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	.responsive-table td:nth-of-type(1):before { content: "First Name"; }
	.responsive-table td:nth-of-type(2):before { content: "Last Name"; }
	.responsive-table td:nth-of-type(3):before { content: "Job Title"; }