Php 在页面顶部回显字符串时,表格样式会发生变化

Php 在页面顶部回显字符串时,表格样式会发生变化,php,html,twitter-bootstrap,css,Php,Html,Twitter Bootstrap,Css,编辑 无论如何,这不是一个大问题;这真的只是一个侥幸,我发现了它,而不是删除这个问题,我将留给子孙后代 结束-编辑 我真的不知道如何搜索这个,但我在设计我的桌子时遇到了它,这很奇怪。我用PHP输出数据并将其填充到表中。如果我在页面顶部回显一个字符串,表的格式会改变——实际上看起来更好——但我不明白为什么会发生这种情况。我正在使用Twitter引导和PHP7 这是表格: 下面是我在页面顶部回显字符串时的样子: 我无法想象回显字符串会对桌子样式产生什么影响,但在我看来,回显字符串时桌子看起来更好

编辑

无论如何,这不是一个大问题;这真的只是一个侥幸,我发现了它,而不是删除这个问题,我将留给子孙后代

结束-编辑

我真的不知道如何搜索这个,但我在设计我的桌子时遇到了它,这很奇怪。我用PHP输出数据并将其填充到表中。如果我在页面顶部回显一个字符串,表的格式会改变——实际上看起来更好——但我不明白为什么会发生这种情况。我正在使用Twitter引导和PHP7

这是表格:

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

我无法想象回显字符串会对桌子样式产生什么影响,但在我看来,回显字符串时桌子看起来更好。所以我有两个问题:

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

    在以下时间之前输出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>
    
    
    标题
    切换导航
    页面标题

    活跃的? 对 不 排序方式: 生效日期 最小边际 最大利润 佣金百分比 AOP目标 最后修改 订单: 提升 下降的 搜寻 活动记录 生效日期 最小边际 最大利润 佣金百分比 年 月 AOP目标 最后修改 修改 2017-04-05 60100 126000 .030% 2017 四月 26000 2017-04-05 10:49:57 本地主机\DEV 2017-04-05 60100 126000 .030% 2017 四月 26000 2017-04-05 10:50:00 本地主机\DEV 2017-04-05 60100 126000 .030% 2017 四月 26000 2017-04-05 10:50:06 本地主机\DEV
    在以下时间后输出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>
    
    表格看起来更好
    标题
    切换导航
    页面标题

    活跃的? 对 不 排序方式: 生效日期 最小边际 最大利润 佣金百分比 AOP目标 最后修改 订单: 提升 下降的 搜寻 活动记录 生效日期 最小边际 最大利润 佣金百分比 年 月 AOP G