<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="4" style="text-align:center; color: white; background-color:#295f89;">Painting</th> </tr> </thead> <tbody> <tr> <td>Was hydrant painted:</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='hydranPainted'> No <input type="radio" style="display:inline;width:20px" name='hydranPainted'> </td> <td>Was vegetation removal required?</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='vegetationremovalRequired'> No <input type="radio" style="display:inline;width:20px" name='vegetationremovalRequired'> </td> </tr> <tr> <td>If yes:</td> <td> Brushed <input type="radio" style="display:inline;width:20px" name='hydranPaintType'> Sprayed <input type="radio" style="display:inline;width:20px" name='hydranPaintType'> </td> <td>Was site returned to original condition?</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='siteReturned'> No <input type="radio" style="display:inline;width:20px" name='siteReturned'> </td> </tr> <tr> <td colspan="2">If no, why:<input class="form-control transparent-input" type='text' name='hydrantNoPaintReason'></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="10" style="text-align:center; color: white; background-color:#295f89;">Visual Inspection</th> </tr> </thead> <tbody> <tr> <td colspan="10">Indicate yes or no and describe actions taken at the bottom of this form.</td> </tr> <tr> <td>*Signs of damage, leakage or vandalism?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="signsdamage" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="signsdamage" class="form-control" style="min-width: 20px;"></td> <td>Sunken areas filled?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="sunkenAreasFilled" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="sunkenAreasFilled" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>*Missing or damaged bolts?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingBolts" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingBolts" class="form-control" style="min-width: 20px;"></td> <td>*Auxiliary valve accessible?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="auxvalveAccessible" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="auxvalveAccessible" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td rowspan="2">Any landscape, walls, vehicles or other obstacles within 3 feet?</td> <td style="text-align:center;" rowspan="2">Yes</td> <td rowspan="2"><input type="radio" name="3feet" class="form-control" style="min-width: 20px;"></td> <td rowspan="2" style="text-align:center;">No</td> <td rowspan="2"><input type="radio" name="3feet" class="form-control" style="min-width: 20px;"></td> <td>Missing cap(s)? Nozzle? Streamer?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingCaps" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingCaps" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>Missing chain(s)?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingChains" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingChains" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>If yes, was notice left at residence?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="noteLeft" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="noteLeft" class="form-control" style="min-width: 20px;"></td> <td>*Needs to be raised or lowered?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="needsRaised" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="needsRaised" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>*Hydrant leak or weep valve issue?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="hydrantLeak" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="hydrantLeak" class="form-control" style="min-width: 20px;"></td> <td>Work order needed?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="woNeeded" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="woNeeded" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td colspan="10">*Indicates a Work Order is needed</td> </tr> </tbody> </table> </div> </div> </div>

@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 #eee; 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); } } input.transparent-input { border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } .transparent-input { background-color: rgba(0, 0, 0, 0); border:none; border-bottom: dotted 2px #c9c9c9 !important; box-shadow:none !important; display: inline-block; width:50%; } input.transparent-input{ background-color:rgba(0,0,0,0) !important; border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } td input[type="radio"] { display: block; margin: auto; width: 20px; }