Why are the PHP generated Bootstrap tableheading and columns misaligned? -
here's output:
php
if ($stmt->rowcount() > 0) { $table = '<div class="table-responsive"><table class="table table-stripped"> <thead> <tr> <th>name</th> <th>title</th> <th>work type</th> <th>genre</th> <th>pdf</th> <th class="fa fa-envelope-o" style="font-size: larger; color: blue; position: relative; padding-right: 24px; " title="send writer email"></th> <th class="fa fa-thumbs-o-up" style="font-size: larger; color: green;" title="request manuscript"></th> <th>rating</th> </tr></thead><tbody>'; foreach ($rows $row) { $table .= "<tr class='trow'> <td class='fullname'>" . $row['name'] . "</td> <td class='title'>" . $row['title'] . "</td> <td class='form-type'>" . $row['formtype'] . "</td> <td class='genre'>" . $row['genre'] . "</td> <td><a class='synopsis' href='uploads/" . $row['filename'] . "' target='_blank'>synposis</a></td> <td><input type='checkbox' class='sendemail' /></td> <td><input type='checkbox' class='email-request-manuscript' /></td> <td><div class='rating'></div></td> <td class='hidden email'>" . $row['email'] . "</td> <td class='hidden id'>" . $row['id'] . "</td> <td><input class='hidden writer-rating' value='" . $row['rating'] . "'/></td> </tr>"; }; $table .= "</tbody></table></div>"; echo $table; html
<html lang="en"> <head> <title>writer's tryst - enablers form</title> <link type="text/css" href="css/enablers.css" rel="stylesheet" /> <link rel="stylesheet" href="css/jquery.rateyo.min.css"> <link rel="stylesheet" href="css/bootstrap-multiselect.css"> <style> select { padding-bottom: 8px; } .rating:not(#min-rating) { margin-top: 2px; margin-left: 0px; } #min-rating { margin-top: 28px; } .email-request-manuscript { padding-left: 0; } </style> </head> <body> <div class="container-fluid"> <img id="img-enablers" src="#" alt="images" /> <form id = "form-enablers" class="form-horizontal pull-left"> <h1>enablers</h1> <input type="hidden" id="enabler-id" name="enabler-id" /> <input type="hidden" id="rating" /> <div class="form-group"> <label for="form-type" class="col-sm-3 control-label">work type</label> <select id="form-type" name="form-type[]" class="btn btn-custom-primary col-sm-9" multiple="multiple" required> </select> </div> <div class="form-group"> <label for="genres" class="col-sm-3 control-label">genres</label> <select id="genres" name="genres[]" class="btn btn-custom-primary col-sm-9" multiple="multiple" required></select> </div> <div class="form-group" > <label for="min-rating" class="col-sm-3 control-label">minimum rating</label> <div id="min-rating" class="rating "></div> </div> <div class="form-group" style="cursor: pointer;"> <label for="reset-rating" class="col-sm-3 control-label">reset rating</label> <span id="reset-rating" class="fa fa-refresh col-sm-9" style="margin-top: 12px; margin-left: -8px"></span> </div> <div class="form-group"> <label for="special-instructions" class="control-label col-sm-4">special instructions</label> <!--<div id="special-instructions" contenteditable data-required style="display: inline-block; position: relative; height: auto; min-height: 96px; width: auto; min-width: 288px"></div><br/>--> <textarea id ="special-instructions" class="form-control col-sm-8" required spellcheck="true" rows="4" name="special-instructions"></textarea> </div> <span class="thumbnail form-group">for limited time, enablers can use site <span style="color: #f00; font-weight:bold">free</span>. reserve right change policy without notice.</span> <p class="bg-text-info">your entries saved after clicking search button.</p> <div class="form-group"> <button type="submit" id="enablers-search" class="btn btn-custom-success btn-block glyphicon glyphicon-search"> search</button> </div> </form> <form id="form-email-preview" class="form-horizontal pull-left;" style="margin: 0px 0 12px;"> <div id="main-container" class="hidden" style="border: 0px solid black; padding-top: 12px; border-radius: 8px;"> <span><b>subject: </b></span><input id="subject" type="text" value="manuscript request" style="display: inline-block" /> <p><b>email:</b></p> <p id="mail-container" contenteditable data-required style="display: inline-block; padding: 6px"></p><br/> <p id="buttons" class="hidden"> <input type='button' id='send-email' class='btn btn-custom-success' value='send email' /><span> </span> <button id='cancel-email' class = 'btn btn-danger'>cancel</button> </p> </div> <div id="current-row" class="hidden"></div> <input id="current-checkbox" type="checkbox" class="hidden" /> <input id="current-tr" type="number" class="hidden" /> <input id="email-type" type="text" class="hidden" /> </form> </div> <form id="writers-list"> <p id="manuscript-request" class="hidden">to request manuscript, click checkbox beneath thumbs-up icon.</p> <div id="table-list"></div> </form> <input type="hidden" id="writer-id" /> <script src="js/bootstrap-multiselect.js"></script> <script async defer src="js/jquery.rateyo.js"></script> <script async defer src="js/enablers.js"></script> </body> </html>
your table headings use font-awesome classes (i.e. fa) being made inline-block because of class, causes them misalign.
adding display: table-cell headings fixes issue.
see http://www.bootply.com/91tydwbupt# example.
Comments
Post a Comment