Question

这是输出：

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 as $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 well 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 a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</span>
                <p class="bg-text-info">Your entries are saved after clicking the 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 well 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 a manuscript, click the checkbox beneath the 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>

Answer 1

使用font-awesome类（即fa）的表标题由于该类而被内联阻塞，这会导致它们不对齐。

将display: table-cell添加到这些标题可以解决问题。

例如，请参阅http://www.bootply.com/91TyDWbuPt#。

为什么PHP生成的Bootstrap表格和列未对齐？

1 个答案: