Question

我正在尝试制作一个带有修复标题的可滚动表。如果将数据输入到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>

我错过了什么吗？希望有人可以指引我正确的方向。

Answer 1

<!-- 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>

具有Fix标头的可滚动Echo DB表

1 个答案: