css sorunu - Sabit bir başlık yapıyor

3 Cevap php

Ben daha önce yüklenen ne bağlı olarak, ayrı ayrı ve arkaya yüklenir ekrvea panelleri oluşturmak için CSS divs kullveığı bir AJAX uygulaması var. Alt "paneli" Bir veritabanından bir liste veya kayıtları gösteren bir tablodur. Veritabanı üstündeki tablonun adıdır, ve ben her zaman kayıtların listesinin üstünde olması için bir yol istiyoruz. Bu Javascript veya PHP, ya da css ve html ile ben, bunu nasıl emin değilim.

edit: ben bir div tablo başlığı sarma ve bu amaçla css ayarlama çalıştı, ancak tablo başlığı kendi başlığında olmak görünmüyor ve kayıtlardan ayrı ekrvea kalmaz.

.tableheader {

    position: absolute;

}

ve

$table = 'AUCTIONS';

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

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

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

Burada temel bir şey kaçırdım mı?

3 Cevap

Ben başlığını hareket ettirmeden tablo gezinmek mümkün olacak demek varsayıyorum?

Ben senin en kolay seçenek CSS overflow özellik olduğunu düşünüyorum.

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

<!-- ... -->

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

@ Joshxtothe4: Eğer yanlış öğesi kümesi kaydırma var gibi geliyor:

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

Bunun için mutlak konumlandırma gerekmez.

Eğer tablo adı tablo ile panel içinde olmak ister misiniz? Eğer öyleyse, ben oldukça basit olması gerektiğini düşünüyorum, ama belki ben bir şey eksik.

Eğer tablo ismi geliyor panel dışında yerleştirilmiş olmak istiyorsanız, belki de bir top ve left özelliği ile birlikte CSS özelliği position: absolute (kullanabilirsiniz ) Sayfanın üstündeki koymak.

Alternatif olarak, yeniden ana div için javascript kullanmak isteyebilirsiniz. Örneğin, sen başlık gidin ve ona bir id titleParent vermek ve kimliği ile bir div başlık koymak istediğiniz sayfanın üstünde, boş bir div oluşturmak eğer {[(1) }], aşağıdaki javascript kod parçasında üst div alt panelinden başlık div hareket etmelidir:

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

Sadece alt panelden sonra bir <script> bloğu içinde bu pasajı koymak.

Aradığınız etkiyi elde etmek için, o öğenin üzerine gidin: Eğer verileri içeren tbody (tablo vücut) kullanabilir ve taşma ayarlamak isteyeceksiniz.

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

etiketler