Soru colspans içeren sabit tablo üstbilgi satırları nasıl oluşturulur?


Veritabanı verilerinden oluşturulan büyük bir dinamik tablom var. Sabit kalması için sütun başlık satırlarına ihtiyacım var ve gerekli satırları kaydır.

Web'in her yerinde düzgün çalışmayı denemek için çok sayıda komut dosyası denedim. Bu basit ve kolay tarayıcıda tutmak istiyorum, çünkü bazı hedef bilgisayarlar oldukça gevşek.

işte çalışıyorum:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Sample</title>
  </head>

  <body>
    <br><br><br><br>

    <table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
      <tr bgcolor='gray'>
        <td>
          <br><br><br>
          need the blue column heading rows to remain fixed, and scroll the green rows:<br>

    <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
      <thead>

        <tr>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
          <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
          <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
          <th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
        </tr>
        <tr>
            <th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-c</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-d</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-e</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td bgcolor="PaleGreen" colspan="3" align="center" valign="middle">Col 1<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[1]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[2]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[3]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[4]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[5]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[6]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[7]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
      </tbody>
    </table>

          <br><br><br><br>
        </td>
      </tr>
    </table>

    <br><br><br><br><br><br>

  </body>

</html>

18
2017-08-03 15:05


Menşei


Biraz daha ayrıntılı olarak, "Sabit kalmak ve satırları gerekli bir şekilde kaydırmak için sütun başlık satırlarına ihtiyacım var" derken neyi kastediyorsunuz? - Tom
"Sabit kalması ve gerekli satırları kaydırmak için sütun başlık satırlarına ihtiyacım var." Tam olarak ne demek istiyorsun? Üst sıradaki satırın kaymayacağını, bunun altındaki satırların mı olacağını kastediyor musunuz? - Cypress Frankenfeld
@ Tom, 1000'den fazla yeşil satıra sahip olduğum asıl tablo, ekranı aşağı kaydırırken görünür kalması için iki mavi başlık satırına ihtiyacım var. - KM.
Bu sorunun büyük bir vaat edilen ödül olduğunu biliyorum, ancak bunun yalnızca daha özel bir kopyası var: stackoverflow.com/questions/673153/... - Cypress Frankenfeld
@Cypress Frankenfeld, referans ettiğin gibi birçok örnek gördüm. Benim problemim masam için bu işi nasıl yapacağım ve evet, masamı kullanarak çalışan bir örnek için maksimum puanları vereceğim. - KM.


Cevaplar:


Başlık satırlarını / satırlarını her ikisinde aynı ortak grup ayarlarını kullanarak ayrı bir tabloda veri satırlarına sahip olabilirsiniz.

Aşağıdakiler IE9, FF14.01 ve Chrome 20.0.1132.57'de iyi çalışır.

<table border="1">
    <colgroup>
        <td width="100px">Column 1</td>
        <td width="100px">Column 2</td>
        <td width="100px">Column 3</td>
        <td width="16px" style="background-color: gray;"><td>
    </colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
    <table border="1">
        <colgroup>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </colgroup>
        <tbody>
            <tr>
                <td>Row 1 - Cell 1</td>
                <td>Row 1 - Cell 2</td>
                <td>Row 1 - Cell 3</td>
            </tr>
            <tr>
                // rest omitted, see DEMO for full table
            </tr>
        </tbody>
    </table>
</div>

Bkz DEMO

Düzenle - 3 Ağustos 2012 

Çalışmaya başlayabilmemin tek yolu, biraz hilekârlıktı. Başlığı ilk örnekte olduğu gibi ayırdım. Ancak, üstbilgideki çok sayıda farklı genişlikten dolayı, en güvenilir yol, her şeyi hizalamak, kopyalamaktı. th satırlar Ayrıca ikinci tablonun içine ama içeride metin olmadan. Bu onları "görünmez" kıldı, ancak sanki ikinci sütundaki sütunları beklendiği gibi hizalamaya zorladı.

Görmek DEMO

Biraz aceleci geliyor ve eminim ki uygun bir çözüm var ama bu arada iyi görünüyor.

Düzenle - 7 Ağustos 2012 

Bütün masa yapısını% 100 oranında "kutulamak" için herhangi bir yol var mı?   ekran genişliği ve yükseklik için yüksekliği değiştirin: 150px; bir şeye   $ (window) .height () - 200 gibi daha dinamik

Elbette bunu yapmanın daha zarif bir yolu var ama masayı daha dinamik hale getirebildim.

Genişlik, toal genişliğini yaklaşık% 95 oranında kapattığımda ve masanın (masaların) min-width: 600px; başlık ve bir min-width: 584px vücut için, böylece tablonun her zaman hizalı kalmasını sağlar.

Dinamik yükseklik için jQuery kullandı, yeniden boyutlandırma işlevini windows yeniden boyutlandırma etkinliğine bağladı:

$(document).ready(function() {
    resizeTableHeight();

    $(window).on("resize.resizeTableHeight", function() {
        resizeTableHeight();
    });
});

function resizeTableHeight() {
    var headerHeight = $("#tableHeaderContainer").height();
    var documentHeight = $(document).height();
    var spacingHeight = 50;

    $("#tableBodyContainer").height(documentHeight - headerHeight - spacingHeight);
}​

Keman penceresini açtığınızda, keman penceresinin orjinal yüksekliğini dinamikleri görmek büyük olasılıkla yüksek olacaktır. Bölücüyü hareket ettirin ve yeniden boyutlandırmayı iş başında görmek için görünümü küçültün.

Yap değil Bu olayı, her seferinde yeniden boyutlandırmaya devam edecek şekilde ızgarayı göstermediğinizde açmayı unutmayın.

Dinamik kılavuza bakın DEMO

Bazı stillerin kellede css'de (sağ üstte) olduğunu görürsünüz, diğerleri değil. CSS'm çok güçlü değil ve onları CSS alanından öğelere taşıdığımda bazı stiller algılanmaya başladı. Ne yapabildiğimi CSS'ye taşıdım ve kalanını kırmayacak şekilde kodladı. Her gün CSS ile çalışan birinin sizin için bunu çözebileceğine eminim.

Ayrıca CSS ve jQuery için gerekli bazı öğelere bazı kimlikler ekledim.
CSS için bunun yerine sınıfları kullanabileceğini varsayalım. Bunu sana bırakıyorum.

özet
Eminim istediğin şeyi elde etmenin daha zarif bir yolu vardır ve muhtemelen bazı senaryolar bunun için bir eklentiye sahiptir. O zamana kadar işe yarayacak gibi görünüyor. Aynı zamanda, sütunlara çok sayıda uzun veri girildiğinde, ancak sütunlar çok sayıda kişiselleştirilmiş bir çözüm girildiyse ve yine bazı genişlikler için bazı dinamik hesaplamalar eklemeniz gerekebilirse, sütunların tekrar 600 piksele yakın hizalamaya başlamasıdır. zamanla jQuery ile.

Düzenle - 9 Ağustos 2012 

Yorumlarda bahsettiğim bir td'nin genişliğini ayarlamakla ilgili. İlk sütunda bahsettiğim sınıfları kullanarak uzun metinde sorunu çözdüm. IE, FF ve Chrome'da çalışır.

Görmek DEMO

Yorumlarda bahsedilen mantığı kullandım. Çok daha iyi bir adlandırma kuralı bulabilirsiniz. Alt sütundaki ana sütun + açma / kapama anahtarını kullandım. Bu sütun 1 stilleri için aşağıdaki gibi çalışır:

.col01-000{
    width: 0px;
}
.col01-001{
    width: 75px;
}
.col01-010, .col01-100{
    width: 50px;
}
.col01-011, .col01-101{
    width: 125px;
}
.col01-110{
    width: 100px;
}

İlk td sınıfını atadım col01-100 hangi demek 50px.
İkinci td şimdi bir sınıf var col01-011bu td'nin ilk ana sütuna ait olduğunu ancak alt sütun 2 (50px) ve 3 (75px) genişliğine sahip olduğunu belirtir. Bu, 125 piksele kadar ekler.

Umarım bu mantıklıdır, ancak olmasa bile, bir sohbette tartışmaya memnuniyetle devam eder ve uygulamak istediğiniz bir şey varsa ölçümleri sizinle birlikte çalışırım.

Şimdiye kadar ölçümleri görebiliyorum:

Col01 

  • Col1 = 175 px üzerinde 3
  • Aşağıdaki gibi 175px aşağı kırma 3 Alt sütunlar: 50px-50px-75px

Col02

  • Col2 = 100 pks'den fazla 3
  • 3 Alt sütunlar aşağıdaki gibi 100px aşağı kırma: 40px-30px-30px

Col03

  • Col3 = 100 px üzerinde 1 kişi
  • Alt sütun yok

Col04

  • Col4 = 150 pks'den fazla colspan 5
  • Aşağıdaki gibi 150 piksel aşağı kırma 5 alt sütunlar: 30px-30px-30px-30px-30px

Col05

  • Col5 = 100px üzerinde 1 kişi
  • Alt sütun yok

19
2017-08-03 15:14



Web'de bunun gibi birçok demo buldum. Sorun, masamda çalışmayı denediğimde başarısız oluyor. Masamın iki başlık satırı var ve colspans kullanın, bunu kendi tanıtımınıza dahil edebilir misiniz? - KM.
@KM .: Bir gözüm var, bu gece onunla uğraşamayacağım ama bu gece geç saatlere kadar. O zaman yine de bir cevap yazdım. - Nope
teşekkürler, ben de şimdi yola çıktım ... - KM.
iyi görünüyor. Ancak, tablo ekrandan daha geniş olduğunda, dikey kaydırma çubuğu ekrandan gizlenir. Tüm tablo yapısını ekran genişliğinin% 100'üne kadar "kutulamak" ve yüksekliği değiştirmek için herhangi bir yol var mı? height:150px; daha dinamik bir şeye $(window).height()-200 - KM.
@KM .: Uzun bekleyiş için özür dilerim. Oturup bu geceye kadar odaklanamadım. Cevabımı düzenledim ve daha dinamik bir ızgaraya DEMO ekledim. Tablonun toplam genişliğini, ekran genişliğinin% 95'inde minimum 600 piksel genişliğinde kapattım. 600'ün altında bir şey hizalama sorunlarına neden olmaya başlar, en azından şimdi masa parçaları senkronize olarak hareket edecektir. JQuery'yi kullanarak dinamik yükseklik hesaplarını da ekledim. Umarım bu sizi doğru yöne doğru yönlendirir. - Nope


Düzenle: Pencereyi yeniden boyutlandırmada sabit konum için düzeltme:

http://jsfiddle.net/eReBn/13/

Komple Kodu:

$(function() {
    (function($) {
        $.fn.fTable = function(o) {

            var tableTmpl = '<table id="XYZ_fixed" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base"></table>';

            this.wrap('<div class="fTable_container" />');
            var fc = this.parent();
            fc.css('width', this.width() + 18);

            this.wrap('<div class="fTable_rContainer" />');
            var rc = this.parent();
            rc.css('height', o.height);

            var fTable = $(tableTmpl);
            fTable
             .addClass('fTable_fixedHead')
             .html(this.find('thead').clone())
             .prependTo(rc);

            $(window).on('scroll resize', function () {
                console.log(isScroll());
                if (isScroll()) {
                    fTable.css('left', $(this).scrollLeft() * -1);
                } else {
                    fTable.css('left', '');
                }
            });
        };

        function isScroll() {
           var root= document.compatMode=='BackCompat'?
               document.body : document.documentElement;
            return root.scrollWidth>root.clientWidth;
        }

    })(jQuery);

    $('#XYZ').fTable({
        height: 300
    });
});

Düzenle: Çözümleri aşağıda deneyin. Stilleri manuel olarak eklemek ve tabloyu ayarlamak için okunduğunuzdan beri.

DEMO:  http://jsfiddle.net/eReBn/12/embedded/result/

Manuel:

a. Stil sayfanıza CSS’yi kopyalayın

.fTable_rContainer {
    position: relative;
    overflow: auto;    
    height: 300px; /* Height of the table */
}

.fTable_container {
    width: 643px;  /* Total width of the table you set + 18px (scroll size) */
}

.fTable_fixedHead {
    position: fixed; 
}

b. Tabloyu div ile sar class="fTable_container"

c. Kopyala thead Orijinal tablonun bir parçası ve DEMO'daki gibi yeni bir masaya taşı.

d. Sınıf ekle fTable_fixedHead yeni masaya

Bazı komut dosyaları ile otomatik:

DEMO:  http://jsfiddle.net/eReBn/11/embedded/result/


2 tablo kullanarak çözmeye çalıştım.

  1. Orijinal masa (el değmemiş)
  2. Orijinal tabla üzerinde Sabit Üstbilgi tablosu (mutlak konumlandırılmış)

Kontrol et ve beğendiysen haber ver.

DEMO

Firefox ve Chrome'da test edildi. [Bugün diğer tarayıcılarda test edecek]

Tam kod @ http://jsfiddle.net/eReBn/7/

JS:

$(function() {
   (function($) {
     $.fn.fTable = function(o) {
        /* Preserve the attr list from original table    */
        var el = this[0], arr = [], it;
        for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {

          it = attrs.item(i);

          if (it.nodeName == 'id') {
           arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
          } else {
           arr.push(it.nodeName + '="' + it.nodeValue + '"');
          }
        }

        var tableTmpl = '<table ' + arr.join(' ') + '></table>';

        /* Wrap it inside div's */
        this.wrap('<div class="fTable_container" />');
        this.wrap('<div class="fTable_rContainer" />');

        var rc = this.parent();

        /* Clone the thead and add it to the fixed table head */
        $(tableTmpl)
          .addClass('fTable_fixedHead')
          .html(this.find('thead').clone())
          .prependTo(rc);

        /* Position the fixed head table on scroll */
        rc.scroll(function() {
          rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
        });

        var _that = this;
        rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);

        /* Position the left on resize*/
        $(window).resize(function() {
          rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
        });
     };

     /* Position fix for webkit browsers */
     jQuery.fn.aPosition = function() {
        thisLeft = this.offset().left;
        thisTop = this.offset().top;
        thisParent = this.parent();
        parentLeft = thisParent.offset().left;
        parentTop = thisParent.offset().top;
        return {
           left: thisLeft - parentLeft,
           top: thisTop - parentTop
        }
     }
  })(jQuery);      

});

Kullanımı:

$('#XYZ').fTable({
    height: 300
});

11
2017-08-09 16:26



Bu, küçük istemci tarafı işlemeyle çalışır mı? Cevabınızı önceki sorumdan kullanmaya çalışırken, bazen tablo çok büyüktü ve tarayıcı çöktü. Her birinde bir onay kutusu + onchange betiği bulunan birkaç bin tablo satırı ve 50 sütun var. - KM.
@KM. Sadece klonlar thead tablodan ve kaydırma olayını kullanın. Düşmeyeceğini sanmıyorum .. ama binlerce satırlı bir keman kurmaya çalışıyorum. Ama bu istediğin şeye yakın bir şey mi? - Selvakumar Arumugam
Kaydırma olayı veya başka bir çözümle çalışıyorum. - KM.
@KM. Peki manuel vs daha otomatik. Diğer çözümde, yapıştırma işlemini kopyalamanız gerekir. thead ayrı bir tabloda ve kayan bir div var. Benim çözümümde javascript ile üretildi. - Selvakumar Arumugam
Tüm sayfayı kodla yapıyorum, böylece başlığın çoğaltılması önemsiz. - KM.


Kullandığımız DataTables.net ve çok benzer bir sorunu oldukça güzel çözdü. İşte bir örnek gelişmiş çok satırlı bir başlık ile kendi web sitelerinden. Alt sütun kategorilerinizde de sıralayabilirsiniz.


6
2017-08-08 21:07



Ben de DataTables kullanıyorum. Oldukça iyi çalışıyor (ben sadece tökezledi birkaç tuhaflıklar), ve sizin için çok işe yarıyor. Eski tarayıcılarda daha büyük tablolar için biraz zaman alabilir. - MatthewKremer


Senin için bir seçenek de sağlayabilirim. Bu, tarayıcı penceresinin kaydırıldığını varsayar.

Buradaki fikir, masanızın bir klonunun yapılması ve thead dışarı çıkarılmış. Görünümün üstüne sabitlenmiş ve gizlenmiştir.

Kullanıcı tablonun en üstüne geçtiğinde, klonlanmış tablo görüntülenir. Ben de dahil bir resizeviewport'un genişliğindeki değişiklikleri işlemek için olay. Sabit üstbilgiyi ve tablayı yatay olarak hizalayan bazı küçük hıçkırıklar vardır, ancak bu büyük bir sorun değildir.

İşte tablonuzu kaynak olarak kullanan bir demo (bazı şeyleri daha kolay okunabilmesi için satır içi stilleri CSS'ye taşıdım):

jsFiddle DEMO

$(function(){
    var $window = $(window),
        stickyTable = $('#XYZ'),
        stickyHeader = stickyTable.clone(true),
        tableTop = stickyTable.offset().top,
        isSticky = false;

    handleScroll();

    $window.on({
        scroll: handleScroll,
        resize: handleResize
    });


    stickyHeader.find('tbody').remove();
    stickyHeader.find('tfoot').remove();

    stickyHeader.addClass('sticky-header').appendTo('body');

    function handleScroll() {
        var scrollTop = $window.scrollTop();

        if(scrollTop > tableTop && !isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px').show();
            isSticky = true;
        } else if(scrollTop <= tableTop && isSticky) {
            stickyHeader.hide();
            isSticky = false;
        }
    }

    function handleResize() {
        if(isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px');
        }
    }
});​

6
2017-08-10 19:56



Yatay olarak kaydırmak da başlığı kaydırmalı, ancak sabit ve yanlış hizalanmış olarak kalır. - Tiberiu-Ionuț Stan
@jackwanders Başlık üstbilgisini yatay olarak nasıl kaydırmanız hakkında bir fikriniz var mı? Bu neredeyse mükemmel - Marcus


Önceden yazılmış cevaplardan bazıları parlak!

Bunu Google Chrome’da test ettim. Bunun nedeni, Javascript’in hata ayıklaması için mükemmel Chrome Geliştirici araçları ve gerçek zamanlı olarak css’i silme işlemiydi.

İçinde bir klon işleviyle jQuery eklediyseniz, bir sayfa yüksekliğine sıkıştırmadan kaydırılabilir bir çizelge elde edebilirsiniz ve istediğiniz yerde yüzer bir Tablo üstbilgisine sahip olabilirsiniz.

Aşağıdaki kod, tablo üstbilgisini klonlayacaktır:

jQuery(document).ready(function () {
    jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
    jQuery(".tableheader").append(jQuery(".base2 thead").clone());

Daha sonra bazı statik değişkenler ayarlamanız ve kaydırma etkinliğini yakalamanız gerekir:

var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();

jQuery(window).scroll(function () { scroll_post_header(); });

Ardından, üstbilgiyi geçerli üstbilgi üzerinde yukarı ve aşağı hareket ettirin, ancak geçerli üstbilgi yolun dışına doğru kaydırıyorsa, sayfanın üst kısmında saklayın.

    function scroll_post_header() {
        var new_position = headerOffsetTop - jQuery(window).scrollTop();
        if (new_position < 0) { new_position = 0;}
        if (headerPosition.top != new_position) {
            headerToMove.css("top",new_position);
            //headerToMove.stop().animate({ 'top': new_position }, 300);
        }
        if (jQuery(window).scrollTop() < 15) { headerToMove.css("top",headerOffsetTop);}
    }
});

Şimdi klonlanacak olan başlığa bazı ilk CSS'yi ekleyin. Mevcut başlığın en üstte olduğu yerde bu tatlı noktayı bulmanız gerekecek, ama bu bile jQuery sorgulamasıyla elde edilebilir.

.tableheader {
    position: fixed;
    height: 80px;
    top: 160px;
    left: 2.5%;
    z-index: 1000;    
}

Tam çalışma örneği şu adreste bulunabilir: http://jsfiddle.net/webwarrior/YZ8cJ/142/

Umarım bu herhangi bir html değiştirmeden biraz yardımcı olur.


4
2017-08-09 05:38





Eğer sen .klon()  thead ve tüm sütunları orijinal genişliğini koruyarak masaya koyun.

Güncelleştirme: IE 6 ve 7'nin sorun yaşadığını fark ettim ve onları düzelttim. Sorun, IE'nin bu sürümlerinin sizi konumlandırmanıza izin vermemesiydi. thead direkt olarak. Sonuç olarak, onu değiştirdim, böylece thead tr bunun yerine, ancak tarayıcı IE <8 ise.

Başka bir hata IE <9'un problemi olduğuydu .prependTo (). Sadece IE Tester olup olmadığından emin değilim, ancak sorunu kullanarak çözdüm .sonra().

Güncellenmiş Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  // http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
  var Browser = {
    version: function() {
    var version = 999; // we assume a sane browser
      if (navigator.appVersion.indexOf("MSIE") != -1) {
        // bah, IE again, lets downgrade version number
        version = parseFloat(navigator.appVersion.split("MSIE")[1]);
      }

      return version;
    }
  }

  var $thead = $('#XYZ thead'),
      $new_thead = $thead.clone().hide(),
      $window = $(window),

      distance_from_top = $thead.offset().top,
      did_scroll = false; // http://ejohn.org/blog/learning-from-twitter/

  // for IE <= 7
  var $tr_1, $tr_2;

  // add the cloned thead
  $thead.after($new_thead);

  if( Browser.version() < 8 ) {
    $new_thead.find('tr').css({
      'position': 'absolute',
      'top': 0,
      'margin-left': -1
    });

    $tr_1 = $new_thead.find('tr:first');
    $tr_2 = $new_thead.find('tr:last').css('top', $tr_1.height());
  }else {
    $new_thead.css({
    'position': 'fixed',
    'width': $thead.width(),
    'top': 0
    });
  }

  $window.scroll(function() {
    if( Browser.version() < 8 ) {
      did_scroll = true;
    }

    if( $window.scrollTop() >= distance_from_top ) {
      $new_thead.show();
    }else {
      $new_thead.hide();
    }
  });

  setInterval(function() {
    if( did_scroll ) {
    did_scroll = false;
      $tr_1.css('top', $window.scrollTop());
      $tr_2.css('top', $tr_1.height() + $window.scrollTop());
    }
  }, 250);
</script>

Düzenle

Farketmedim K. M. sabit bir yükseklik masa istedi. Yukarıdaki örneğime bakarsanız, tarayıcı tablonun üst kısmından ilerlerse tablo başlığının sabit olduğunu görürsünüz. Ancak, benim anlayışımdan bu istediği şey değil.

Bunu Mac'imde aşağıdaki tarayıcılarda test ettim.

  1. Safari (5.1.7)
  2. Firefox (11.0)
  3. Chrome (21.0.1180.75)

Ve bunu Windows 7'de test ettim:

  1. IE Tester kullanarak IE 8 ve 9
  2. Firefox (5.0.1, 6.0.2, 7.0.1, 8.0.1, 10.0.2)
  3. Chrome (12.0.742.91)
  4. Safari (5.1.5)

IE 6 ve 7'de bozuldu, ama bir düzeltme olup olmadığını görmek için bakmadım.

gösteri


var table = $('#XYZ'),
    thead = table.find('thead'),
    fixed_thead = thead.clone(),

    // create a copy of the original table
    fixed_thead_wrapper = $('<table />', {
      'id': 'fixed_thead_wrapper',
      'align': 'center',
      'width': table.outerWidth(),
      'border': '1',
      'cellspacing': 0,
      'cellpadding': 0              
    }).insertBefore(table),

    // this forces the table to be in a scrollable area
    table_wrapper = $('<div />', {
      'id': 'fixed_table_wrapper',
      'height': 300,
      css: {
        'overflow': 'auto'
      }
    });

// add the cloned thead to the new table
fixed_thead_wrapper.append(fixed_thead);

// hide the original thead.
// this is a very hackish way of doing this, but I'm not sure of a better way as of right now
table.css({
  'position': 'relative',
  'top': fixed_thead_wrapper.height() * -1
});

// wrap the original table
table.wrap(table_wrapper);

// line the tables up now that the scrollbar is present
fixed_thead_wrapper.css({
  'position': 'relative',
  'left': table.offset().left - fixed_thead_wrapper.offset().left
});

4
2017-08-07 20:46



IE7'de çalışan bir şey arıyordum, işte bu. Ancak, Chrome, IE8, IE9'da, tablo başlığı, kaydırma yapılarak yatay olarak birkaç piksel tarafından yanlış hizalanır. Herhangi bir fikir bu nasıl sıralamak için? - Marcus


Ben her zaman bu kadar kolay kullanılan Plugin kullanmak için bunu kolayca $('#tableID').fixedtableheader();

Şaşırtıcı, çok hafif ve esnek çalışır.

http://fixedheadertable.com/


3
2017-08-03 15:16