MB-King

Bootstrap 3 Responsive Tables

by freedawirl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//drive.google.com/drive/folders/0B1DuAIGoQkJCRVBHRGxGMVE0VTA"></script>
<div class="container">
    <div class="row">

        <div id="no-more-tables">
            <table class="table table-bordered table-striped table-condensed cf">
        		<thead class="cf">
        			<tr>
        				<th>Showing</th>
        				<th>Units</th>
        				<th class="numeric">Standard</th>
        				<th class="numeric">*Peak</th>
        				<th class="numeric">Install Fee</th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td data-title="Showing"> – </td>
        				<td data-title="Units">1</td>
        				<td data-title="Standard" class="numeric">$429</td>
        				<td data-title="*Peak" class="numeric">$540</td>
        				<td data-title="Install Fee" class="numeric">$38</td>
        			</tr>
        			<tr>
        				<td data-title="Showing">25</td>
        				<td data-title="Units">49</td>
        				<td data-title="Standard" class="numeric">$17,868</td>
        				<td data-title="*Peak" class="numeric">$22,335</td>
        				<td data-title="Install Fee" class="numeric">$1,862</td>

        			</tr>
        			<tr>
        				<td data-title="Showing">50</td>
        				<td data-title="Units">98</td>
        				<td data-title="Standard" class="numeric">$35,736</td>
        				<td data-title="*Peak" class="numeric">$44,670</td>
        				<td data-title="Install Fee" class="numeric">$3,724</td>
        			</tr>
        			<tr>
        				<td data-title="Showing">75</td>
        				<td data-title="Units">147</td>
        				<td data-title="Standard" class="numeric">$47,300</td>
        				<td data-title="*Peak" class="numeric">$59,125</td>
        				<td data-title="Install Fee" class="numeric">$5,586</td>
  ...

CSS

@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid rgba(0,0,0,.095); 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables 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;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}

/****************************************************************************************************************
 * Table Overrides
 ****************************************************************************************************************/
.table-bordered {
    border-color:silver;
}

    .table thead, .table tr > th {
        background-color: #0069aa;
        color: #fff;
        font-size: 110%;
    }

        .table thead i {
            color: #fff;
        }

    .table > thead > tr > th {
        padding: 10px;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ECECEC;
}

.table > tbody > tr > td, .table > tbody > tr > th, 
.table > tfoot > tr > td, .table > tfoot > tr > th {
    /*padding: 5px 10px 5px 10px;*/
}

.table > thead > tr > th, .table > tbody > tr > th,.table > tbody > tr > td {
    /*border :none;*/
    text-align:center
}
    .table > thead > tr > th {

    }
.table > thead > tr > th, .table > tbody > tr > th...