Question

我有一个AJAX应用程序，它使用CSS divs在屏幕上创建面板，这些面板分别连续加载，具体取决于之前加载的内容。底部“面板”是显示数据库中的列表或记录的表。在数据库的顶部是表的名称，我想让它始终位于记录列表之上。如果使用Javascript，PHP或css和html，我不确定如何执行此操作。

编辑：我尝试将表头包装在div中并为此目的设置css，但表头似乎不在其自己的标题中，并且不会在屏幕上与记录分开。

.tableheader {
    position: absolute;
}

和

$table = 'AUCTIONS';

$rows = getRowsByArticleSearch($query, $table);

echo '<div id="tableheader" class="tableheader">';

echo "<h1>{$query} Auctions</h1>" . "\n"; 
echo "</div>";

我错过了一些基本的东西吗？

Answer 1

我认为你的意思是能够在不移动标题的情况下滚动表格吗？

我认为最简单的选择是CSS overflow property。

<style type="text/css">
  div#dblist {
    overflow: scroll;
    height: 400px;
  }
</style>

<!-- ... -->

<div>Database Title</div>
<div id="dblist">
  <table>
    <!-- ... -->
  </table>
</div>

@ Joshxtothe4：听起来你已经将滚动设置为错误的元素：

<div> <!-- sounds like you have it set here -->
  <div><h1>Query Archive</h1></div>
  <div> <!-- and want it set here -->
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

你不应该为此绝对定位。

Answer 2

您是否希望表名与表格一起位于面板内？如果是这样，我认为它应该非常简单，但也许我错过了一些东西。

如果您希望将表名放在它所来自的面板之外，也许您可以使用CSS属性position: absolute（以及top和left属性）来放置它位于页面顶部。

或者，您可能希望使用javascript重新生成div。例如，如果您在页面顶部创建一个空div，您希望标题在哪里，并为其标识titleParent并将标题放在ID为parent的div中，以下javascript代码段应将标题div从底部面板移动到顶部div：

var title = document.getElementById('title');
document.getElementById('titleParent').appendChild(title);

只需将该代码段放在底部面板后的<script>块中即可。

Answer 3

您将需要使用tbody（表体）来包含您的数据，并设置溢出：滚动该元素以获得您正在寻找的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>

        <style type="text/css" media="screen">
        table {

            margin:0;
            padding:0px;
        }

        tbody {
                height:80px;
                overflow-x:hidden;
                overflow-y:scroll;
                margin:0;
                padding:0;
            }
        table td, table th{ padding:2px;}

        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
            </thead>

            <tbody>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>

            </tbody>
        </table>
    </body>
</html>

做一个恒定的标题 - css问题

3 个答案: