时间戳

首页 > 解决方案 > 带有 Fix header 的可滚动 Echo DB 表

php - 带有 Fix header 的可滚动 Echo DB 表

问题描述

我正在尝试制作一个带有修复标题的可滚动表格。如果将数据输入到 HTML，这很有效，但是当我尝试将数据库的内容回显到表格时，滚动条会混乱，并且我的标题不再固定。如图所示，滚动条位于每个表格条目上。我已经尝试过 .div 像某些人那样将表格主体包裹起来，但它不起作用。

在此处输入图像描述

 body{
	background: lightblue;
}	

#tble th {
    text-align: left;
    background-color: green;
    color: white;
}

table{
  display: block;
  border: 1px solid;
  margin-top: 10px;
  width: 350px;
}

tbody{
  display: block;
  height: 50px;
  overflow-y: scroll;
}

th {
  width: 75px;
}

td { 
  width: 75px;
}
<html lang="en">
<body>
<table align="center" id="tble">
  <thead>
  <th style="text-align: center">ID</th>
  <th style="text-align: center">Username</th>
  <th style="text-align: center">Rights</th>
  <th style="text-align: center">Age</th>
  </thead>

  <tbody>   
  <tr>
  <?php
   $conn = mysqli_connect("localhost", "root", "", "account");
   $result = mysqli_query($conn, "SELECT * FROM account.log WHERE rights IN ('Admin','User')", MYSQLI_USE_RESULT) or die(mysql_error());
   while($row = mysqli_fetch_array( $result )) {
   ?>
    <td style="text-align: center"><?php echo $row['id']; ?></td>
   	<td style="text-align: center"><?php echo $row['user']; ?></td>
    <td style="text-align: center"><?php echo $row['rights']; ?></td>
    <td style="text-align: center"><?php echo $row['age']; ?></td>
		</tr>
  </tbody>
<?php 
}
?>
</body>
</table>

有什么我错过的吗？希望有人能指出我正确的方向。

标签： phphtmlcssmysql

解决方案

<!-- language: lang-html -->

<html lang="en">
<body>
<table align="center" id="tble">
  <thead>
  <th style="text-align: center">ID</th>
  <th style="text-align: center">Username</th>
  <th style="text-align: center">Rights</th>
  <th style="text-align: center">Age</th>
  </thead>

  <tbody>   
  <tr>//move this from here
  <?php
   $conn = mysqli_connect("localhost", "root", "", "account");
   $result = mysqli_query($conn, "SELECT * FROM account.log WHERE rights IN ('Admin','User')", MYSQLI_USE_RESULT) or die(mysql_error());
   while($row = mysqli_fetch_array( $result )) {
   ?>
    <tr> //to here
    <td style="text-align: center"><?php echo $row['id']; ?></td>
    <td style="text-align: center"><?php echo $row['user']; ?></td>
    <td style="text-align: center"><?php echo $row['rights']; ?></td>
    <td style="text-align: center"><?php echo $row['age']; ?></td>
        </tr>
  </tbody>
<?php 
}
?>
</body>
</table>

推荐阅读