作出一個恆定的標題-css問題

我有一個AJAX應用程序已經使用CSS divs在屏幕上創建面板，這是獨立和連續加載，具體取決於它之前加載。底部的「面板」是一個表格，顯示了數據庫中的一個或多個記錄。數據庫的頂部是表的名稱，我想要一種方法讓它始終位於記錄列表的上方。我不確定如何做到這一點，如果它是與JavaScript，或PHP，或CSS和HTML。作出一個恆定的標題-css問題

編輯：我試圖在表格標題中包裝一個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>";

我錯過了這裏的東西根本？

來源

2009-01-23 Joshxtothe4

我假定你的意思是能夠在不移動標題的情況下滾動表格？

我認爲你最簡單的選擇是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>

你不應該需要這個絕對定位。

來源

2009-01-23 12:39:38

這基本上是我做什麼，作爲表層已經設置爲滾動，所以我只是把頭部在一個單獨的層，但它並沒有區別.. – 2009-01-23 13:17:10

您是否希望表格名稱與表格一致？如果是這樣，我認爲它應該是非常簡單的，但也許我錯過了一些東西。

如果要將表名放置在面板之外，也許可以使用CSS屬性position: absolute（以及top和left屬性）將其置於頁面的頂部。

或者，您可能想要使用JavaScript來重新分隔div。例如，如果您在頁面頂部創建了一個空格，您希望標題的位置，併爲其指定一個編號titleParent，並將標題放在ID爲parent的div中，以下javascript代碼段應將標題div從底部面板頂部的div：

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

只要把該片段在<script>塊底板後。

來源

2009-01-23 12:37:24 pkaeding

您將希望使用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>

來源

2009-02-24 10:54:49 garrow

作出一個恆定的標題-css問題

回答

相關問題