Kaydırılabilir Yukarıdaki tabloda Sabit başlık

3 Cevap php

Bir div undernearth kayıtların al arge listesini kaydırmak için mümkün iken ben bir yerde ayrı div kalmak, bir tablo başlığı için çalışıyorum. Her iki divs Layer 3 adında bir div vardır burada sadece ben kullanıyorum css dosyası.:

#Layer3
{
    position:absolute;
    width: 89%;
    height: 40%;
    left: 10%;
    top: 56%;
    background-color: #f1ffff;
}

#Layer3 h1 {
    font-size: medium;
    color: #000033;
    text-decoration: none;
    text-align: center;
}

.tableheader {
}

.tablecontent {
    overflow: auto;
}

ve ben html oluşturmak için kullanıyorum php kod parçası:

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

echo "<h1>{$query} Auctions</h1>" . "\n"; 
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';

echo "<table border='0' width='100%'><tr>" . "\n"; 

echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";

echo "</tr>\n";

// printing table rows

foreach ($rows as $row)
{
    $pk = $row['ARTICLE_NO'];
    echo '<tr>' . "\n"; 

    // table contens generated in here

    echo '</tr>' . "\n"; 
}
}

echo "</div>";

Ben cevapsız ne emin değilim, ama tableheader sabit veya tablecontent bile ayrı olmak görünmüyor.

3 Cevap

div adı eşit div id değildir. # Katman3 Layer3 bir kimliği olan bir elemanı başvuran olur. Sadece bir eleman belirli bir kimliği var izin verilir; Tüm kimlikleri benzersiz olmalıdır.

Etiketleri (tablo) kapatmak için unutma.

Div # Katman3 onun içindeki her şey kaydırma ise, o zaman bazı taşma belirledi. Taşma onu yeniden tanımlayın: # Katman3 tarzı gizli. Sen marjları ile oynarken ve doğru şeyler konumlandırılmış almak için yüzer denemek gerekir, ancak hasta bunu size bırakabilir.

Eğer ana foreach () döngü sonra <table> etiketini kapatmak için unuttum.

Bana özellikle ilgilendiğiniz sadece çıplak elemanları sorununuzu aşağı armut izin, tüm <div> düğümler kurtulmak gerekir. Burada çok temel tabela:

<table>
   <thead class="tableheader">
      <tr>
         <th>Seller ID</th>
         <th>Start Date</th>
         <th>Description</th>
      </tr>
   </thead>
   <tbody class="scrolling">
      <tr>
         <td>28</td><td>25 January 2009</td><td>Hello World!</td>
      </tr>
      <tr> etc. </tr>
   </tbody>
</table>

(<thead> eleman kullanımını dikkat edin.)

Şimdi burada istediğiniz kaydırma üretecek stil sayfası bulunuyor:

.tableheader {
    display: block;
}

.scrolling {
    display: block;
    height: 300px;
    overflow: auto;
    width: 100%
}

th, td { /* first column */
    width: 200px
}

th + th, td + td { /* second column */
    width: 240px
}

th + th + th, td + td + td { /* third column */
    width: 316px
}

Ayar bir sonucu display:block Eğer sütunların genişliğini düzeltmek zorunda olduğunu fark ...

etiketler