Sujeet Raman

Sujeet Raman

  • 753
  • 927
  • 358k

please anyone help....Unable to align HTML tables parallel t

Dec 22 2015 5:10 AM
I have created two HTML grid tables but I am finding difficulty while placing/aligning them parallel to each other.i have to align neatly side by side i cant please help me
below my code

my two table name is 1.Load Shedding Inputs and 2.Shipper ECQ Data.ive to get parallel
 
 
 
 
<section>     <div class="tabInnerDiv" ng-cloak="">         <form name="htmlForm" class="form-horizontal" confirm-on-exit>             <div ng-show="data != null">                 <table style="width: 100% ">                     <tr>                         <td>                             <div class="row">                                 <table align="left">                                     <tr>                                         <td style="text-align:center">                                             <span style="align-removed:center"><b>Load Shedding Inputs</b></span>                                         </td>                                       </tr>                                 </table>                                 <br />                                 <table align="left">                                     <tr>                                         <td style="text-align:left">                                             <span style="align-removed:center"><b>Time</b></span>                                         </td>                                         <td style="text-align:center">                                             <span style="align-removed:center"><b>Firm Load Shedding(%)</b></span>                                         </td>                                           <td style="text-align:right">                                               <input type="button" value="Submit" class="b" ng-click="submit()" />                                         </td>                                       </tr>                                   </table>                                 <br />                                 <div class="widget " data-role="grid">                                     <ng-form name="LoadSheddingInputsForm" data-toggle="validator">                                         <table role="grid" class="table">                                             <thead class="-header" role="rowgroup">                                                 <tr role="row">                                                     <th class="table-header tac b" scope="col" style="width: 16%">                                                         <span class="link">Start Time</span>                                                     </th>                                                     <th class="table-header tac b" scope="col" style="width: 16%">                                                         <span class="link">Firm Load Shedding(%)</span>                                                     </th>                                                     <th class="table-header tac b" scope="col" style="width: 16%">                                                         <span class="link">SOQ(kWh)</span>                                                     </th>                                                       <th class="table-header tac b" scope="col" style="width: 16%">                                                         <span class="link">Hours Remaining</span>                                                     </th>                                                 </tr>                                             </thead>                                             <tbody role="rowgroup">                                                 <tr role="row" ng-repeat="result in data.LoadSheddingIpunts" ng-class-even="'alt'">                                                     <td class="tal b fntm fntn " role="gridcell">{{ result.StartTime }}</td>                                                     <td class="tal b fntm fntn " role="gridcell">{{ result.FirmLoadSheddding }}</td>                                                     <td class="tal b fntm fntn " role="gridcell">{{ result.SOQkwh }}</td>                                                     <td class="tal b fntm fntn " role="gridcell">{{ result.HoursRemaining }}</td>                                                 </tr>                                             </tbody>                                         </table>                                     </ng-form>                                 </div>                                 <br />                                 <table align="right">                                     <tr>                                         <td style="text-align:right">                                             <input type="button" value="Generate ECQ" class="b" ng-click="GenerateECQ()" />                                         </td>                                           <td style="text-align:right">                                             <input type="button" value="Print" class="b" ng-click="Print()" />                                         </td>                                       </tr>                                 </table>                                    <table align="right">                                     <tr>                                         <td style="text-align:center">                                             <span style="align-removed:center"><b>Shipper ECQ Data</b></span>                                         </td>                                     </tr>                                 </table>                                 <br />                                 <div id="containerDiv">                                     <div ng-show="data.GasDay!=null" style="height: 100%;border-style:outset;border-color:grey;border-width:1px;">                                         <table style="width:99% ;margin-removed1px">                                             <tr role="row">                                                 <td style="width:10%">                                                     <div class="tal b fntm fntn ">                                                         GasDay                                                     </div>                                                 </td>                                                 <td style="width:10%">                                                       @*<select ng-options="result.GasDay for result in data.GasDay"></select>*@                                                     <select class="k-header k-dropdown-wrap k-state-default k-state-hover" ng-model="data.GasDay">                                                         <option value="">Select</option>                                                           <option ng-repeat="result in data.GasDay" ng-selected="result.Option=='1'" ng-if="result.Type=='GasDay'"                                                                 value="{{result.GasDay}}">                                                             {{result.GasDay}}                                                         </option>                                                     </select>                                                   </td>                                             </tr>                                         </table>                                     </div>                                 </div>                                 <br />                                 <div id="containerDiv">                                     <div ng-show="data.ShipperName!=null" style="height: 100%;border-style:outset;border-color:grey;border-width:1px;">                                         <table style="width:99% ;margin-removed1px">                                             <tr role="row">                                                 <td style="width:10%">                                                     <div class="tal b fntm fntn ">                                                         Shipper Name                                                     </div>                                                 </td>                                                 <td style="width:10%">                                                       @*<select ng-options="result.ShipperName for result in data.ShipperName"></select>*@                                                     <select class="k-header k-dropdown-wrap k-state-default k-state-hover" ng-model="data.ShipperName">                                                         <option value="">All</option>                                                           <option ng-repeat="result in data.GasDay" ng-selected="result.Option=='1'" ng-if="result.Type=='ShipperName'"                                                                 value="{{result.ShipperName}}">                                                             {{result.ShipperName}}                                                         </option>                                                     </select>                                                   </td>                                             </tr>                                         </table>                                     </div>                                 </div>                                 <br />                                   <div style="float: left;" class="col-lg-5 col-md-5 col-sm-11 col-xs-11">                                     <div class="widget " data-role="grid">                                         <ng-form name="ShipperECQDataForm" data-toggle="validator">                                             <table role="grid" class="table">                                                 <thead class="-header" role="rowgroup">                                                     <tr role="row">                                                         <th class="table-header tac b" scope="col" style="width: 16%">                                                             <span class="link">Shipper Short Code</span>                                                         </th>                                                         <th class="table-header tac b" scope="col" style="width: 16%">                                                             <span class="link">Shipper Name(%)</span>                                                         </th>                                                         <th class="table-header tac b" scope="col" style="width: 16%">                                                             <span class="link">ECQkWh(kWh)</span>                                                         </th>                                                       </tr>                                                 </thead>                                                 <tbody role="rowgroup">                                                     <tr role="row" ng-repeat="result in data.ShipperECQDataNew" ng-class-even="'alt'">                                                         <td class="tal b fntm fntn " role="gridcell">{{ result.ShipperShortCode }}</td>                                                         <td class="tal b fntm fntn " role="gridcell">{{ result.ShipperName }}</td>                                                         <td class="tal b fntm fntn " role="gridcell">{{ result.ECQkWh }}</td>                                                       </tr>                                                 </tbody>                                             </table>                                         </ng-form>                                     </div>                                 </div>                                 <br />                                 <table align="right">                                     <tr>                                           <td style="text-align:right">                                             <input type="button" value="Print" class="b" ng-click="Print()" />                                         </td>                                       </tr>                                 </table>                             </div>                         </td>                     </tr>                     </table>             </div>         </form>     </div><section>
 

Answers (1)