Question

修改

这无论如何都不是一个好问题;我发现它真的只是一个侥幸，而不是删除这个问题，我会留给后人。

结束 - 编辑

我不确定如何搜索这个，但是在我的桌子造型时遇到了它，这很奇怪。我在PHP中输出数据并在表格中填充它。如果我在页面顶部回显一个字符串，表格的格式会发生变化 - 实际上看起来更好 - 但我无法弄清楚它为什么会发生。我正在使用Twitter Bootstrap和PHP 7。

这是表格：

以下是我在页面顶部回显字符串时的样子：

我无法想象回声字符串会对表样式造成什么影响，但在我看来，当我回显一个字符串时，表格看起来更好。所以我真的有两个问题：

为什么会出现这种影响？
如何在不回显页面上的字符串的情况下实现此效果？

修改

输出HTML之前：

<html lang="en"><head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css"><!--Personalized stylesheet-->
        <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="message">
                        <span id="stats"></span>
        </div>

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <p id="logo" class="navbar-brand"><img src="images/logo_circle.png">&nbsp;Page Title</p>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a href="#n">Problems or Suggestions?</a></li>
                        <li>
                            <p class="navbar-btn">
                                <a href="mailto:myname@email.com?subject=;body=Please enter your comments here:Please include a screenshot if you have run into an error:" target="_top" class="btn btn-info">E-Mail Support</a>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <form class="form-inline" name="search_records" method="POST" action="">
                <div class="form-group">
                    <label for="active">Active? </label>
                    <select name="active">
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="sort">Sort By: </label>
                    <select name="sort">
                        <option value="Effective_Date">Effective Date</option>
                        <option value="MinMargin">Min Margin</option>
                        <option value="MaxMargin">Max Margin</option>
                        <option value="Commission_Percent">Commission Percent</option>
                        <option value="AOPGoal">AOP Goal</option>
                        <option value="Last_Modified">Last Modified</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="order">Order: </label>
                    <select name="order">
                        <option value="ASC">Ascending</option>
                        <option value="DESC">Descending</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default" name="submit_search_records">Search</button>
            </form>
            <div class="row clearfix center">
                <h2>Active Records</h2>           
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Effective_Date</th>
                            <th>Min Margin</th>
                            <th>Max Margin</th>
                            <th>Commission Percent</th>
                            <th>Year</th>
                            <th>Month</th>
                            <th>AOP Goal</th>
                            <th>Last Modified</th>
                            <th>Modified By</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                <input type="hidden" value="2">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:49:57</td>
                <td>localhost\DEV</td>
            </tr><tr>
                <input type="hidden" value="3">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:50:00</td>
                <td>localhost\DEV</td>
            </tr><tr>
                <input type="hidden" value="4">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:50:06</td>
                <td>localhost\DEV</td>
            </tr>                    </tbody>
                </table>

                <div class="spacer"></div>

            </div>
            <div class="spacer"></div>

        </div>

</body></html>

输出HTML后：

<html lang="en"><head></head><body>Table looks better
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css"><!--Personalized stylesheet-->
        <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <div id="message">
                        <span id="stats"></span>
        </div>

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <p id="logo" class="navbar-brand"><img src="images/logo_circle.png" >&nbsp;Page Title</p>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a href="#n">Problems or Suggestions?</a></li>
                        <li>
                            <p class="navbar-btn">
                                <a href="mailto:myname@email.com?subject=;body=Please enter your comments here:Please include a screenshot if you have run into an error:" target="_top" class="btn btn-info">E-Mail Support</a>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <form class="form-inline" name="search_records" method="POST" action="">
                <div class="form-group">
                    <label for="active">Active? </label>
                    <select name="active">
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="sort">Sort By: </label>
                    <select name="sort">
                        <option value="Effective_Date">Effective Date</option>
                        <option value="MinMargin">Min Margin</option>
                        <option value="MaxMargin">Max Margin</option>
                        <option value="Commission_Percent">Commission Percent</option>
                        <option value="AOPGoal">AOP Goal</option>
                        <option value="Last_Modified">Last Modified</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="order">Order: </label>
                    <select name="order">
                        <option value="ASC">Ascending</option>
                        <option value="DESC">Descending</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default" name="submit_search_records">Search</button>
            </form>
            <div class="row clearfix center">
                <h2>Active Records</h2>           
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Effective_Date</th>
                            <th>Min Margin</th>
                            <th>Max Margin</th>
                            <th>Commission Percent</th>
                            <th>Year</th>
                            <th>Month</th>
                            <th>AOP Goal</th>
                            <th>Last Modified</th>
                            <th>Modified By</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                <input type="hidden" value="2">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:49:57</td>
                <td>localhost\DEV</td>
            </tr><tr>
                <input type="hidden" value="3">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:50:00</td>
                <td>localhost\DEV</td>
            </tr><tr>
                <input type="hidden" value="4">
                <td>2017-04-05</td>
                <td>60100</td>
                <td>126000</td>
                <td>.030%</td>
                <td>2017</td>
                <td>April    </td>
                <td>26000</td>
                <td>2017-04-05 10:50:06</td>
                <td>localhost\DEV</td>
            </tr>                    </tbody>
                </table>

                <div class="spacer"></div>

            </div>
            <div class="spacer"></div>

        </div>

</body></html>

Answer 1

正如LGSon所指出的，每当我回显一个字符串时，头元素（标题，链接等）都会在body标签中呈现。这改变了链接的css样式表，并改变了我在上面的截图中看到的表的格式。除了使用以不同方式改变我的表格的Twitter Bootstrap之外，我还有个性化的样式表。

在页面顶部回显字符串时表格样式更改

1 个答案: