Tail Light - Rapid Ad

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 id="no-more-tables" class="row">
    <table class="table table-bordered table-striped table-condensed cf">
      <thead class="cf">
        <tr>
          <th>Units</th>
            <th>Size</th>
          <th class="numeric">Standard</th>
          <th class="numeric">*Peak</th>
          <th class="numeric">Install Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-title="Units">1</td>
          <td data-title="Size">50" x 22"</td>
          <td data-title="Standard" class="numeric">$425</td>
          <td data-title="*Peak" class="numeric">$535</td>
          <td data-title="Install Fee" class="numeric">$28</td>
        </tr>
         <tr>
          <td data-title="Units">40</td>
          <td data-title="Size">50" x 22"</td>
          <td data-title="Standard" class="numeric">$12,750</td>
          <td data-title="*Peak" class="numeric">$15,938</td>
          <td data-title="Install Fee" class="numeric">$1,120</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"> <img class="img-responsive" src="http://www.capmetro.org/uploadedImages/Capmetroorg/Business/TransitAds/Rapid-Ad-Tail-Light.png" alt="Tail Light Bus Ad" draggable="false">
      <br><span class="badge">Ad size:50" x 22"</span>
      </div>
   
  </div>
  
</div>

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; 
	}
  	#lightbox{
										width:788px !important;
										border: 12px solid rgba(200,200,200,0.4) !important;
										border-radius: 10px;
										background: transparent !important;
									}
									 #lightbox img#lightboxImage {
										width: 100%;
									}
									#lightbox, .MetroAds #lightbox #lightboxDetails{
										padding:0px
									}
									#lightbox #closeButton {
										top: -5px;
										right: -5px;
									}

 
	/* 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 {
       ...