Büyük bir tablo görüntülenirken HTML tablo başlıkları her zaman pencerenin üst kısmında görünür

Tek bir özellik eklemek için bir HTML tablosunun sunumunu "tweak" yapabilmek istiyorum: tablo ekranda olacak ancak başlık satırları ekranın dışında kalacak şekilde sayfayı aşağı kaydırırken, başlıkların görüntüleme alanının en üstünde görünür kalmasını istiyorum.

Bu, kavramsal olarak Excel'deki "bölmeleri dondur" özelliği gibi olacaktır. Ancak, bir HTML sayfasında birden fazla tablo olabilir ve ben bunun sadece o anda görüntülenen tablo için, sadece o tablo görüntülenirken gerçekleşmesini istiyorum.

Not: Tablo veri alanının kaydırılabilir hale getirildiği ancak başlıkların kaydırılmadığı bir çözüm gördüm. Benim aradığım çözüm bu değil.

Christopher Rapcewicz
Edited question 2013ösp11ös18 Aralık 2013 в 6:11
Programlama
html html-table
2009ööp17öö24 Haziran 2009 в 12:17
33 görünümler

Bu sorunla çok yakın zamanda karşılaştım. Ne yazık ki, biri başlık diğeri gövde için olmak üzere 2 tablo yapmak zorunda kaldım. Muhtemelen şimdiye kadarki en iyi yaklaşım değil ama işte gidiyor:



    oh hai


    <table id="tableHeader">
        <tr>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
        </tr>
    </table>
    <div style="height:50px; overflow:auto; width:250px">
        <table>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
            </tr>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
            </tr>
        </table>
    </div>

Bu benim için işe yaradı, muhtemelen zarif bir yol değil ama işe yarıyor. Daha iyi bir şey yapıp yapamayacağımı görmek için araştıracağım, ancak birden fazla tabloya izin veriyor.

İhtiyacınıza uygun olup olmadığını görmek için overflow özelliğini okuyun

Sergej
Edited answer 2015ösp15ös14 Eylül 2015 в 2:15
Yorumlar (5)

Tam ekran bir tablo kullanıyorsanız, th'yi display:fixed; ve top:0; olarak ayarlamak veya css aracılığıyla çok benzer bir yaklaşım denemek isteyebilirsiniz.

Güncelleme

Sadece iframe (html4.0) ile hızlı bir şekilde çalışan bir çözüm oluşturun. Bu örnek standartlara uygun DEĞİLDİR, ancak kolayca düzeltebileceksiniz:

dış.html

<?xml version='1.0' encoding='UTF-8'?>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        Outer

test.html

<?xml version='1.0' encoding='UTF-8'?>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        Floating

      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }


    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>

        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
merkuro
Edited answer 2009ööp54öö24 Haziran 2009 в 12:54
Yorumlar (3)

theadbölümündedisplay: fixed` kullanmak işe yarayacaktır, ancak bunun yalnızca görünümdeki mevcut tabloda çalışması için JavaScript'in yardımına ihtiyacınız olacaktır. Ve bu zor olacaktır çünkü tarayıcı uyumsuzluğunun ana alanlarından biri olan görüntü alanına göre kaydırma yerlerini ve öğelerin konumunu bulması gerekecektir.

Popüler JavaScript çerçevelerine (jQuery, MooTools, YUI, vb.) bir göz atın ve istediğinizi yapıp yapamayacaklarını ya da istediğinizi yapmayı kolaylaştırıp kolaylaştıramayacaklarını görün.

Yorumlar (4)