<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="2" style="text-align:center; color: white; background-color:#295f89;">Shutdown Checklist</th> </tr> </thead> <tbody> <tr> <td>Project Address: <input class="form-control transparent-input" type='text' name='projectAddress' required></td> <td>Truck #: <input class="form-control transparent-input" type='text' name='truckNumber' required></td> </tr> <tr> <td>Project Number: <input class="form-control transparent-input" type='text' name='projectNumber' required></td> <td>Service Request #: <input class="form-control transparent-input" type='text' name='serviceRequest' required></td> </tr> <tr> <td>Hours Worked: <input class="form-control transparent-input" type='text' name='hoursWorked' required></td> <td>Technician(s): <input class="form-control transparent-input" type='text' name='techs' required></td> </tr> <tr> <td>Mock-Shutdown Date: <input class="form-control transparent-input" type='text' name='mockShutdownDate' required></td> <td>Shutdown Date: <input class="form-control transparent-input" type='text' name='shutdownDate' 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"> <thead class="cf"> <tr> <th colspan="9" style="text-align:center; color: white; background-color:#295f89;">Shutdown Quarter Section and Valve Information</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Quarter Section</td> <td rowspan="2">Valve #</td> <td rowspan="2">Valve Size</td> <td rowspan="2"># of Turns</td> <td rowspan="2">Valve Type (butterfly/gate)</td> <td colspan="2">Mock Vlave Status</td> <td rowspan="2">Torque Value (Ft. lbs.)</td> <td rowspan="2">Condition</td> </tr> <tr> <td>Open</td> <td>Closed</td> </tr> <tr> <td><input class="form-control transparent-input" style="width:100%" type='text' name='quarterSection' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveNum' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveSize' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='numOfTurns' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveType' required></td> <td><input type="radio" name="mockValveStatus" class="form-control"></td> <td><input type="radio" name="mockValveStatus" class="form-control"></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='torqueValue' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='Condition' required></td> </tr> <tr> <td><input class="form-control transparent-input" style="width:100%" type='text' name='quarterSection' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveNum' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveSize' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='numOfTurns' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='valveType' required></td> <td><input type="radio" name="mockValveStatus2" class="form-control"></td> <td><input type="radio" name="mockValveStatus2" class="form-control"></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='torqueValue' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='Condition' required></td> </tr> <tr> <td colspan="8">Were all valves returned to the original operational status after shutdown was completed?</td> <td>Yes <input type="radio" style="display:inline;width:20px" name='valvesReturned'> No <input type="radio" style="display:inline;width:20px" name='valvesReturned'></td> </tr> <tr> <td colspan="3">Anticipated Project Leakage Rate (GPM):</td> <td colspan="6"><input class="form-control transparent-input" style="width:100%" type='text' name='anticipatedLeakageRate' 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"> <thead class="cf"> <tr> <th colspan="6" style="text-align:center; color: white; background-color:#295f89;">Impacted Services</th> </tr> </thead> <tbody> <tr> <td colspan="4" style="text-align:center;">Addresses</td> <td rowspan="2">Fire Hydrants</td> <td rowspan="2">Fire Lines</td> </tr> <tr> <td>Address</td> <td>Type</td> <td>Address</td> <td>Type</td> </tr> <tr> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireHydrants1' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireLines1' required></td> </tr> <tr> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireHydrants1' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireLines1' required></td> </tr> <tr> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type11' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='address12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='type12' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireHydrants1' required></td> <td><input class="form-control transparent-input" style="width:100%" type='text' name='fireLines1' required></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; }