Question

我一直试图让我的网站中的html / php mysql表更具响应性，所以我将bootstrap集成到它，但是在我完成了这项工作并添加了我需要的Bootstrap之后它就不会响应一点都不因此，当我在桌面上查看我的桌面时，它适合整个屏幕，但如果我尝试在我的Nexus 6手机上使用它，它只是很大而且很难看到桌面上的信息，因为你必须滚动很多，即使我在桌面上调整浏览器大小，也不会改变大小。

代码：

{{1}}

Answer 1

注意：给你的表行标题！（我想你知道怎么做）

下载此jquery插件：

http://www.jqueryscript.net/table/Lightweight-jQuery-Responsive-Table-Plugin-ReStable.html

将此标记放在您的头标记AFTER jquery之后（假设您将这些文件上传到css和js文件夹中。）

<link href="css/jquery.restable.min.css" rel="stylesheet" type="text/css">');<script src="js/jquery.restable.min.js"></script>'

将它放在页面底部：

$(document).ready(function() {       
   $('#sorting_table').ReStable({
       rowHeaders: true, // if you want keep the row headers, else false. 
       maxWidth: 480 // Size to which the table become responsive
   });
});

你完成了。调整浏览器大小，您将得到一个很好的响应表！

优势：现在开始如果您正在使用表格，那么只需三行代码即可使每个表格响应。

Answer 2

这是您的代码我已经进行了您需要的更改（您仍然需要下载插件文件并将其上传到服务器）：

    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Domene informasjon</title>

      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!-- added css restable plugin-->
    <link href="css/restable.min.css" rel="stylesheet" />
<!-- end plugin css-->
      <!-- JQuery og Bootstrap JS -->
      <script src="jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
      <script src="js/bootstrap.min.js" type="text/javascript"></script>
      <script src="js/bootstrap.js" type="text/javascript"></script>
<!-- added js restable plugin-->
    <script src="js/jquery.restable.js" type="text/javascript">
<!-- restable-->
</script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <div class="table-responsive">

                <?php
                if(!isset($_GET['field'])) $field = 'ID'; else $field = $_GET['field'];
                if(!isset($_GET['sorting'])) $sort = 'ASC'; else $sort = $_GET['sorting'];

              $sql = "SELECT * FROM server1 ORDER BY " .$field." ".$sort;

              if($sort == 'ASC') $sort = 'DESC'; else $sort = 'ASC';
              ?>

    <table id="sorting_table" class="table table-bordered">

     <tr>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=ID">ID</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Vsite">Vsite</th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Registrar">Registrar</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Eier">Eier</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=NS">NS</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=A">A</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=MX">MX</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Flyttet">Flyttet</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Slettet">Slettet</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Delt">Delt</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Behkd">Behkd</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Varenr">Varenr</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Server">Server</a></th>
      <th><a href="php.php?sorting=<?= $sort; ?>&field=Sistoppdatert">Sist oppdatert</a></th>
    </tr>

    <?php
    // kobling til databasen
    mysql_connect("localhost", "root", "ascent") or die (mysql_error ());

    //merke databasen
    mysql_select_db("dom_oversikt") or die(mysql_error());

    //kjøring av query
    $rs = mysql_query($sql);

    //kvar rad blir til en tabbel
    while($row = mysql_fetch_array($rs)) {

    $color = '';

    if ( ($row['Flyttet'] == "NEI") && ($row['Slettet'] == "JA") && ($row['Delt'] == "NEI") ) $color ='#ff0000';
    if ( (($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA"))|| (($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA")) ) $color ='#FFFF00';
    if ( ($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI") ) $color ='#1E90FF';
    if ( (($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA")) || (($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI")) ) $color ='#3CB371';

        //Første kolone som skal vises
        echo '<tr style="background-color: '. $color . '">';
        echo "<td>" . utf8_encode($row['ID']) . "</td>";
        echo "<td>" . utf8_encode($row['Vsite']) . "</td>";
        echo "<td>" . utf8_encode($row['Registrar']) . "</td>";
        echo "<td>" . utf8_encode($row['Eier']) . "</td>";
        echo "<td>" . utf8_encode($row['NS']) . "</td>";
        echo "<td>" . utf8_encode($row['A']) . "</td>";
        echo "<td>" . utf8_encode($row['MX']) . "</td>";
        echo "<td>" . utf8_encode($row['Flyttet']) . "</td>";
        echo "<td>" . utf8_encode($row['Slettet']) . "</td>";
        echo "<td>" . utf8_encode($row['Delt']) . "</td>";
        echo "<td>" . utf8_encode($row['Behkd']) . "</td>";
        echo "<td>" . utf8_encode($row['Varenr']) . "</td>";
        echo "<td>" . utf8_encode($row['Server']) . "</td>";
        echo "<td>" . utf8_encode($row['Sistoppdatert']) . "</td>";
        echo "</tr>";

    }
    echo "</table>";


    //stenge database koblingen
    mysql_close();
    ?>
                </div>
            </div>
        </div>
    </div>

    <!--call the plugin-->
    <script>
      $(document).ready(function(){
          $('#sorting_table').ReStable({
            rowHeaders: true, // Table has row headers?
            maxWidth: 480 // Size to which the table become responsive
        });
      })
    </script>

    </body>
    </html>

带有bootstrap响应的Mysql表

2 个答案: