MB-Full Side

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>Bus Size</th>
                <th>Ad Size</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="Bus Size">40'</td>
                <td data-title="Ad Size">460.75" x 99"</td>
        				<td data-title="Units">1</td>
        				<td data-title="Standard" class="numeric">$2,200</td>
        				<td data-title="*Peak" class="numeric">$2,750</td>
        				<td data-title="Install Fee" class="numeric">$865</td>
        			</tr>
        			<tr>
        				<td data-title="Bus Size">35'</td>
                <td data-title="Ad Size">416" x 98"</td>
        				<td data-title="Units">1</td>
        				<td data-title="Standard" class="numeric">$2,090</td>
        				<td data-title="*Peak" class="numeric">$2,612</td>
        				<td data-title="Install Fee" class="numeric">$720</td>
        			</tr>
        		
        		</tbody>
        	</table>
          <p class="col-md-12 center"> <em>*Peak Times (SXSW, ACL FEST, F1, X GAMES)</em></p>
        </div>

    
<div class="row ad-pics">
        <div class="col-md-12 center"> <img class="img-responsive" src="http://www.capmetro.org//uploadedImages/Capmetroorg/Business/TransitAds/Bus-Ad-Full-Side.png" alt="Full Side Bus Ad" />
 <span class="badge">Ad size varies by bus...

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