<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" style="width:100%;"> <thead class="cf"> <tr> <th colspan="3" style="text-align:center; color: white; background-color:#295f89;">General Information</th> </tr> </thead> <tbody> <tr> <td>Quarter Section: <input class="form-control transparent-input" type='text' name='quarterSection' required></td> <td colspan="2" >Manhole #: <input class="form-control transparent-input" type='text' name='manhole' required></td> </tr> <tr> <td style="width:50%"></td> <td style="text-align:center;" colspan="2">Purpose of Inspection:</td> </tr> <tr> <td rowspan="2" style="vertical-align:top;">Depth:<input class="form-control transparent-input" type='text' name='depth' required></td> <td>Odor Compliant <input type="checkbox" style="display:inline;width:20px" name='odorcompilant'/></td> <td>Cover Issue <input type="checkbox" style="display:inline;width:20px" name='coverissue'/></td> </tr> <tr> <td>Scheduled Cleaning <input type="checkbox" style="display:inline;width:20px" name='scheduledcleaning'/></td> <td>Other <input type="checkbox" style="display:inline;width:20px" name='other1'/></td> </tr> <tr> <td>Weather Conditions: Dry <input type="radio" style="display:inline;width:20px" name='weatherConditions'> Wet <input type="radio" style="display:inline;width:20px" name='weatherConditions'> </td> <td colspan="2">Standing Water: Yes <input type="radio" style="display:inline;width:20px" name='standingWater' required> No <input type="radio" style="display:inline;width:20px" name='standingWater' required></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" style="width:100%;"> <thead class="cf"> <tr> <th colspan="6" style="text-align:center; color: white; background-color:#295f89;">Manhole Details</th> </tr> </thead> <tbody> <tr> <td colspan="3" style="text-align:center; color: white; background-color:#408cc6;"><b>Details</b></td> <td colspan="3" style="text-align:center; color: white; background-color:#408cc6;width:50%;"><b>Material</b></td> </tr> <tr> <td style="width:25%;">Roadway <input type="checkbox" style="display:inline;width:20px" name='roadway'/></td> <td style="width:25%;" colspan="2">Gutter <input type="checkbox" style="display:inline;width:20px" name='gutter'/></td> <td style="width:25%;" colspan="2">Brick <input type="checkbox" style="display:inline;width:20px" name='brick'/></td> <td style="width:25%;">Block <input type="checkbox" style="display:inline;width:20px" name='block'/></td> </tr> <tr> <td>Paved Alley <input type="checkbox" style="display:inline;width:20px" name='pavedAlley'/></td> <td colspan="2">Unpaved Alley <input type="checkbox" style="display:inline;width:20px" name='unpavedAlley'/></td> <td colspan="2">Concrete <input type="checkbox" style="display:inline;width:20px" name='concrete'/></td> <td>Lined <input type="checkbox" style="display:inline;width:20px" name='lined'/></td> </tr> <tr> <td rowspan="2"></td> <td rowspan="2" colspan="2" style="vertical-align:top;">Other (Describe)<input class="form-control transparent-input" type='text' name='other'></td> <td rowspan="2" colspan="2"></td> <td style="text-align:right;">MH Cover Size: 26" <input type="radio" style="display:inline;width:20px" name='mhcoversize'/></td> </tr> <tr> <td style="text-align:right;">30" <input type="radio" style="display:inline;width:20px" name='mhcoversize'/></td> </tr> <tr> <td colspan="3">Sealed: Yes <input type="radio" style="display:inline;width:20px" name='sealed'> No <input type="radio" style="display:inline;width:20px" name='sealed'> </td> <td colspan="3">Drop MH: Yes <input type="radio" style="display:inline;width:20px" name='dropMH' required> No <input type="radio" style="display:inline;width:20px" name='dropMH' required> </td> </tr> <tr> <td colspan="2" style="width:33.33%"># of Roaches <input class="form-control transparent-input" type='text' name='numRoaches' required></td> <td colspan="2" style="width:33.33%">Paint Needed: Yes <input type="radio" style="display:inline;width:20px" name='paintNeeded' required> No <input type="radio" style="display:inline;width:20px" name='paintNeeded' required></td> <td colspan="2">Media Filter: Yes <input type="radio" style="display:inline;width:20px" name='mediaFilter' required> No <input type="radio" style="display:inline;width:20px" name='mediaFilter' required></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" style="width:100%;"> <tbody> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#295f89;"><b>Condition</b></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Cover Fit</b></td> </tr> <tr> <td style="width:25%;">Good <input type="checkbox" style="display:inline;width:20px" name='coverfitGood'/></td> <td style="width:25%;" colspan="2"></td> <td style="width:25%;" colspan="2"></td> <td style="width:25%;">Rock/Wobbles <input type="checkbox" style="display:inline;width:20px" name='rockWobbles'/></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Cover - Condition</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='coverGood'/></td> <td colspan="2" style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='coverCracked'/></td> <td colspan="2" style="width:33.33%">Broken <input type="checkbox" style="display:inline;width:20px" name='coverBroken'/></td> </tr> <tr> <td colspan="2" style="width:33.33%">Missing <input type="checkbox" style="display:inline;width:20px" name='coverMissing'/></td> <td colspan="2" style="width:33.33%">Severe Corrosion <input type="checkbox" style="display:inline;width:20px" name='coverCorrosion'/></td> <td colspan="2" style="width:33.33%">Restrained/Bolted <input type="checkbox" style="display:inline;width:20px" name='coverRestrained'/>(aluminium)</td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Ring & Frame</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='ringGood'/></td> <td colspan="2" style="width:33.33%">Displaced <input type="checkbox" style="display:inline;width:20px" name='ringDisplaced'/></td> <td colspan="2" style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='ringCracked'/></td> </tr> <tr> <td colspan="2" style="width:33.33%"></td> <td colspan="2" style="width:33.33%">Severe Corrosion <input type="checkbox" style="display:inline;width:20px" name='ringCorrosion'/></td> <td colspan="2" style="width:33.33%">Poor Installation <input type="checkbox" style="display:inline;width:20px" name='ringPoorinstall'/></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Riser</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='riserGood'/></td> <td colspan="2" style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='riserCracked'/></td> <td colspan="2" style="width:33.33%"></td> </tr> <tr> <td colspan="2" style="width:33.33%">Misaligned <input type="checkbox" style="display:inline;width:20px" name='riserMisaligned'/></td> <td colspan="2" style="width:33.33%">Infiltration <input type="checkbox" style="display:inline;width:20px" name='riserInflitration'/></td> <td colspan="2" style="width:33.33%">Roots at Joints <input type="checkbox" style="display:inline;width:20px" name='riserRoots'/></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Cone & Barrel</b></td> </tr> <tr> <td style="width:25%;">Good <input type="checkbox" style="display:inline;width:20px" name='coneGood'/></td> <td style="width:25%;" colspan="2">Cracked <input type="checkbox" style="display:inline;width:20px" name='coneCracked'/></td> <td style="width:25%;" colspan="2">Corroded <input type="checkbox" style="display:inline;width:20px" name='coneCorroded'/></td> <td style="width:25%;">Misaligned <input type="checkbox" style="display:inline;width:20px" name='coneMisaligned'/></td> </tr> <tr> <td style="width:25%;">Infiltration <input type="checkbox" style="display:inline;width:20px" name='coneInfiltration'/></td> <td style="width:25%;" colspan="2">Roots at Joints <input type="checkbox" style="display:inline;width:20px" name='coneRoots'/></td> <td style="width:25%;" colspan="2">Exposed Reinforcement <input type="checkbox" style="display:inline;width:20px" name='coneExposed'/></td> <td style="width:25%;"></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Concrete Collar</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='collarGood'/></td> <td colspan="2" style="width:33.33%">Damaged <input type="checkbox" style="display:inline;width:20px" name='collarDamaged'/></td> <td colspan="2" style="width:33.33%">Needs Repair <input type="checkbox" style="display:inline;width:20px" name='collarRepair'/></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Drop</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">No <input type="checkbox" style="display:inline;width:20px" name='noDrop'/></td> <td colspan="2" style="width:33.33%">Inside <input type="checkbox" style="display:inline;width:20px" name='insideDrop'/></td> <td colspan="2" style="width:33.33%">Outside <input type="checkbox" style="display:inline;width:20px" name='outsideDrop'/></td> </tr> <tr> <td colspan="2" style="width:33.33%">Flow observed in overflow <input type="checkbox" style="display:inline;width:20px" name='flowOverflow'/></td> <td colspan="2" style="width:33.33%">Bench: Settled Debris <input type="checkbox" style="display:inline;width:20px" name='benchDebris'/></td> <td colspan="2" style="width:33.33%"></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Channel</b></td> </tr> <tr> <td style="width:25%;">Good Yes <input type="radio" style="display:inline;width:20px" name='channelGood' required> No <input type="radio" style="display:inline;width:20px" name='channelGood' required></td> <td style="width:25%;" colspan="2">Obstructed Yes <input type="radio" style="display:inline;width:20px" name='channelObstructed' required> No <input type="radio" style="display:inline;width:20px" name='channelObstructed' required></td> <td style="width:25%;" colspan="2">Debris Yes <input type="radio" style="display:inline;width:20px" name='channelDebris' required> No <input type="radio" style="display:inline;width:20px" name='channelDebris' required></td> <td style="width:25%;">Roots at Connection <input type="checkbox" style="display:inline;width:20px" name='channelRoots'/></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" style="width:100%;"> <tbody> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#295f89;"><b>Hydraulics</b></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Indications of Surcharge</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">None <input type="radio" style="display:inline;width:20px" name='surcharge'/></td> <td colspan="2" style="width:33.33%">Minor <input type="radio" style="display:inline;width:20px" name='surcharge'/></td> <td colspan="2" style="width:33.33%">Yes, follow up needed <input type="radio" style="display:inline;width:20px" name='coverBroken'/></td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Issues</b></td> </tr> <tr> <td style="width:25%;">Grease <input type="checkbox" style="display:inline;width:20px" name='hydraulicsGrease'/></td> <td style="width:25%;" colspan="2">Debris <input type="checkbox" style="display:inline;width:20px" name='hydraulicsDebris'/></td> <td style="width:25%;" colspan="2">Silt <input type="checkbox" style="display:inline;width:20px" name='hydraulicsSilt'/></td> <td style="width:25%;">Infiltration <input type="checkbox" style="display:inline;width:20px" name='hydraulicsInfiltration'/>(Note below)</td> </tr> <tr> <td colspan="6" style="text-align:center; color: white; background-color:#408cc6;"><b>Describe flow</b></td> </tr> <tr> <td colspan="2" style="width:33.33%">Steady <input type="radio" style="display:inline;width:20px" name='flowDesc'/></td> <td colspan="2" style="width:33.33%">Pulsing <input type="radio" style="display:inline;width:20px" name='flowDesc'/></td> <td colspan="2" style="width:33.33%">Turbulent <input type="radio" style="display:inline;width:20px" name='flowDesc'/>(aluminium)</td> </tr> <tr> <td colspan="2" style="width:33.33%">Surcharging <input type="radio" style="display:inline;width:20px" name='flowDesc'/></td> <td colspan="2" style="width:33.33%">Sluggish <input type="radio" style="display:inline;width:20px" name='flowDesc'/></td> <td colspan="2" style="width:33.33%"></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; }