<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="col-md-12" style="padding-left:0px;"> <h4>General Information</h4> </div> <div class="no-more-tables"> <table class="col-md-12 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 colspan="2">Quarter Section: <input class="form-control transparent-input" type='text' name='quarterSection' required></td> <td><b>Purpose of Inspection:</b></td> </tr> <tr> <td colspan="2" style="width:50%">Manhole #: <input class="form-control transparent-input" type='text' name='manhole' required></td> <td>Odor Compliant <input type="checkbox" style="display:inline;width:20px" name='odorcompilant'/></td> </tr> <tr> <td colspan="2" style="vertical-align:top;">Depth:<input class="form-control transparent-input" type='text' name='depth' required></td> <td>Cover Issue <input type="checkbox" style="display:inline;width:20px" name='coverissue'/></td> </tr> <tr style="height:44px;"> <td style="width:25%;">Weather Conditions: </td><td> Dry <input type="radio" style="display:inline;width:20px" name='weatherConditions'> Wet <input type="radio" style="display:inline;width:20px" name='weatherConditions'> </td> <td>Scheduled Cleaning <input type="checkbox" style="display:inline;width:20px" name='scheduledcleaning'/></td> </tr> <tr style="height:44px;"> <td>Standing Water: </td><td> 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> <td>Other <input type="checkbox" style="display:inline;width:20px" name='other1'/></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="col-md-12" style="padding-left:0px;"> <h4>Manhole Details</h4> </div> <div class="no-more-tables"> <table class="col-md-12 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=""><b><u>Details</u></b></td> <td colspan="3" style=""><b><u>Material</u></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 colspan="2" style="vertical-align:top;">Other (Describe)<input class="form-control transparent-input" type='text' name='other'></td> <td></td> <td colspan="2" style="">MH Cover Size: 26" <input type="radio" style="display:inline;width:20px" name='mhcoversize'/>30" <input type="radio" style="display:inline;width:20px" name='mhcoversize'/></td> <td></td> </tr> <!--<tr> <td style="text-align:right;">30" <input type="radio" style="display:inline;width:20px" name='mhcoversize'/></td> </tr>--> <tr> <td >Sealed: </td> <td>Yes <input type="radio" style="display:inline;width:20px" name='sealed'></td> <td>No <input type="radio" style="display:inline;width:20px" name='sealed'></td> </tr> <tr> <td>Drop MH:</td> <td>Yes <input type="radio" style="display:inline;width:20px" name='dropMH' required></td> <td>No <input type="radio" style="display:inline;width:20px" name='dropMH' required> </td> </tr> <tr> <td>Paint Needed: </td> <td>Yes <input type="radio" style="display:inline;width:20px" name='paintNeeded' required></td> <td>No <input type="radio" style="display:inline;width:20px" name='paintNeeded' required></td> </tr> <tr> <td>Media Filter:</td> <td>Yes <input type="radio" style="display:inline;width:20px" name='mediaFilter' required></td> <td>No <input type="radio" style="display:inline;width:20px" name='mediaFilter' 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%"></td> <td colspan="2" style="width:33.33%"></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="col-md-12" style="padding-left:0px;"> <h4>Condition</h4> </div> <div class="no-more-tables"> <table class="col-md-12 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="3"><b><u>Cover Fit</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='coverfitGood'/></td> </tr><tr> <td style="width:33.33%">Rock/Wobbles <input type="checkbox" style="display:inline;width:20px" name='rockWobbles'/></td> </tr> <tr> <td colspan="3"><b><u>Cover - Condition</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='coverGood'/></td> <td style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='coverCracked'/></td> <td style="width:33.33%">Broken <input type="checkbox" style="display:inline;width:20px" name='coverBroken'/></td> </tr> <tr> <td style="width:33.33%">Missing <input type="checkbox" style="display:inline;width:20px" name='coverMissing'/></td> <td style="width:33.33%">Severe Corrosion <input type="checkbox" style="display:inline;width:20px" name='coverCorrosion'/></td> <td style="width:33.33%">Restrained/Bolted <input type="checkbox" style="display:inline;width:20px" name='coverRestrained'/>(aluminium)</td> </tr> <tr> <td colspan="3"><b><u>Ring & Frame</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='ringGood'/></td> <td style="width:33.33%">Displaced <input type="checkbox" style="display:inline;width:20px" name='ringDisplaced'/></td> <td style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='ringCracked'/></td> </tr> <tr> <td style="width:33.33%">Severe Corrosion <input type="checkbox" style="display:inline;width:20px" name='ringCorrosion'/></td> <td style="width:33.33%">Poor Installation <input type="checkbox" style="display:inline;width:20px" name='ringPoorinstall'/></td> </tr> <tr> <td colspan="3"><b><u>Riser</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='riserGood'/></td> <td style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='riserCracked'/></td> <td style="width:33.33%">Roots at Joints <input type="checkbox" style="display:inline;width:20px" name='riserRoots'/></td> </tr> <tr> <td style="width:33.33%">Misaligned <input type="checkbox" style="display:inline;width:20px" name='riserMisaligned'/></td> <td style="width:33.33%">Infiltration <input type="checkbox" style="display:inline;width:20px" name='riserInflitration'/></td> <td style="width:33.33%"></td> </tr> <tr> <td colspan="3"><b><u>Cone & Barrel</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='coneGood'/></td> <td style="width:33.33%">Cracked <input type="checkbox" style="display:inline;width:20px" name='coneCracked'/></td> <td style="width:33.33%">Corroded <input type="checkbox" style="display:inline;width:20px" name='coneCorroded'/></td> </tr> <tr> <td style="width:33.33%">Misaligned <input type="checkbox" style="display:inline;width:20px" name='coneMisaligned'/></td> <td style="width:33.33%">Infiltration <input type="checkbox" style="display:inline;width:20px" name='coneInfiltration'/></td> <td style="width:33.33%">Roots at Joints <input type="checkbox" style="display:inline;width:20px" name='coneRoots'/></td> </tr> <tr> <td style="width:33.33%">Exposed Reinforcement <input type="checkbox" style="display:inline;width:20px" name='coneExposed'/></td> </tr> <tr> <td colspan="3"><b><u>Concrete Collar</u></b></td> </tr> <tr> <td style="width:33.33%">Good <input type="checkbox" style="display:inline;width:20px" name='collarGood'/></td> <td style="width:33.33%">Damaged <input type="checkbox" style="display:inline;width:20px" name='collarDamaged'/></td> <td style="width:33.33%">Needs Repair <input type="checkbox" style="display:inline;width:20px" name='collarRepair'/></td> </tr> <tr> <td colspan="3"><b><u>Drop</u></b></td> </tr> <tr> <td style="width:33.33%">No <input type="checkbox" style="display:inline;width:20px" name='noDrop'/></td> <td style="width:33.33%">Inside <input type="checkbox" style="display:inline;width:20px" name='insideDrop'/></td> <td style="width:33.33%">Outside <input type="checkbox" style="display:inline;width:20px" name='outsideDrop'/></td> </tr> <tr> <td style="width:33.33%">Flow observed in overflow <input type="checkbox" style="display:inline;width:20px" name='flowOverflow'/></td> <td style="width:33.33%">Bench: Settled Debris <input type="checkbox" style="display:inline;width:20px" name='benchDebris'/></td> <td style="width:33.33%"></td> </tr> <tr> <td colspan="3"><b><u>Channel</u></b></td> </tr> <tr> <td style="width:25%;">Good </td><td> 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></tr><tr> <td style="width:25%;">Obstructed </td><td colspan="2"> 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></tr><tr> <td style="width:25%;">Debris </td><td colspan="2"> 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></tr><tr> <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="col-md-12" style="padding-left:0px;"> <h4>Hydraulics</h4> </div> <div class="no-more-tables"> <table class="col-md-12 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="3"><b><u>Indications of Surcharge</u></b></td> </tr> <tr> <td style="width:33.33%">None <input type="radio" style="display:inline;width:20px" name='surcharge'/></td> <td style="width:33.33%">Minor <input type="radio" style="display:inline;width:20px" name='surcharge'/></td> <td style="width:33.33%">Yes, follow up needed <input type="radio" style="display:inline;width:20px" name='coverBroken'/></td> </tr> <tr> <td colspan="3"><b><u>Issues</u></b></td> </tr> <tr> <td>Grease <input type="checkbox" style="display:inline;width:20px" name='hydraulicsGrease'/></td> <td>Debris <input type="checkbox" style="display:inline;width:20px" name='hydraulicsDebris'/></td> <td>Silt <input type="checkbox" style="display:inline;width:20px" name='hydraulicsSilt'/></td> </tr> <tr> <td>Infiltration <input type="checkbox" style="display:inline;width:20px" name='hydraulicsInfiltration'/><input class="form-control transparent-input" type='text' name='manhole' required></td> </tr> <tr> <td colspan="3"><b><u>Describe flow</u></b></td> </tr> <tr> <td>Steady <input type="checkbox" style="display:inline;width:20px" name='steadyFlow'/></td> <td>Pulsing <input type="checkbox" style="display:inline;width:20px" name='pulsingFlow'/></td> <td>Turbulent <input type="checkbox" style="display:inline;width:20px" name='turbulentFlow'/>(aluminium)</td> </tr> <tr> <td>Surcharging <input type="checkbox" style="display:inline;width:20px" name='surchargingFlow'/></td> <td>Sluggish <input type="checkbox" style="display:inline;width:20px" name='sluggishFlow'/></td> <td></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; }