表样式更改当顶部相呼应页的字符串

-1

这是不以任何方式一个很大的问题;我发现它真的只是一种侥幸，而不是删除这个问题，我将留给子孙后代。

完 - 编辑

我真的不知道如何寻找这一点，但我碰到它，而我的样式表，这是非常奇怪的。我在PHP中输出数据并将其填充到表中。如果我在页面顶部回显一个字符串，表格的格式会发生变化 - 它实际上看起来更好 - 但我无法弄清楚它发生的原因。我使用Twitter的引导和PHP 7

下面是表：

，这里是什么样子，当我在页面顶部呼应的字符串，如：

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

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

编辑

输出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:[email protected]?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:[email protected]?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>

来源

2017-04-05 Purple Lady

你可以给我们输出HTML之前/之后 –

我添加了输出HTML，并且我注意到我回显的字符串打破了标签。我相信这不是巧合。 –

如果你看起来很好，你会看到所有'head'元素，即'title'，'link'等突然在头部之外，在'body'中被渲染，修复并且它会再次工作 – LGSon

正如由LGSon指出，头部元素（标题，链接，等等）在我回应一个字符串的时候正在正文标记中呈现。这正在改变链接的CSS样式表，并改变了我在上面截图中看到的表格格式。除了使用Twitter Bootstrap来改变我的表格外，我还有个性化的样式表。

来源

2017-04-06 19:07:21

表样式更改当顶部相呼应页的字符串

回答

相关问题