MB-Queen

Bootstrap3 Responsive Table

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">

 
    
    <!-- Do not copy container or row over -->
        <div id="no-more-tables" class="row">
            <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">$385</td>
        				<td data-title="*Peak" class="numeric">$485</td>
        				<td data-title="Install Fee" class="numeric">$30</td>
        			</tr>
        			<tr>
        				<td data-title="Showing">98</td>
        				<td data-title="Units">49</td>
        				<td data-title="Standard" class="numeric">$16,036</td>
        				<td data-title="*Peak" class="numeric">$20,045</td>
        				<td data-title="Install Fee" class="numeric">$1,470</td>

        			</tr>
        			<tr>
        				<td data-title="Showing">50</td>
        				<td data-title="Units">98</td>
        				<td data-title="Standard" class="numeric">$32,072</td>
        				<td data-title="*Peak" class="numeric">$40,090</td>
        				<td data-title="Install Fee" class="numeric">$2,940</td>
        			</tr>
        			<tr>
        				<td data-title="Showing">75</td>
        				<td data-title="Units">147</td>
        				<td data-title="Standard" class="numeric">$42,448</td>
        				<td data-title="*Peak" class="numeric">$53,060</td>
        				<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...