Bir masanın gövdesinin kaymasına izin verirken kafasını sabit tutmasını nasıl sağlayabilirim?

147

Belirli bir boyutu korumak için bir HTML tablosuna ihtiyacım olan bir sayfa yazıyorum. Her zaman orada kalması için tablonun üst kısmındaki başlıklara ihtiyacım var, ancak tabloya kaç satır eklenirse eklensin kaydırmak için tablonun gövdesine de ihtiyacım var. Excel'in mini bir versiyonunu düşünün. Bu basit bir görev gibi görünüyor, ancak web'de bulduğum hemen hemen her çözümün bazı dezavantajları var. Bunu Nasıl Çözebilirim?

javascript  html  css  html-table 
— naneli
kaynak
2
orada birçok örnek var. bu onlardan biri .
— Darren Kopp
IE6, IE7, FF, ... ama özellikle IE'yi hedeflemem gerekiyor
— minty
Orada bir sürü CSS hacklemesi var. IE7'de çalışmaya başlamak önemsiz olmalı.
— Jim
4
Tüm tarayıcılar için cevapla ilgileniyorum!
— minty
16
"IE7'de çalışmak önemsiz olmalı." Jim, sen misin? Sen benim proje yöneticim misin :)
— Aaronius

Yanıtlar:

53

Aynı cevabı bulmalıydım. Bulduğum en iyi örnek http://www.cssplay.co.uk/menu/tablescroll.html - Örnek 2'nin benim için iyi çalıştığını buldum. İç tablonun yüksekliğini Java Script ile ayarlamanız gerekecek, gerisi CSS'dir.

— Ken Penn
kaynak
3
ne yazık ki geniş bir masanız (yatay kaydırma) olduğunda bu yöntem başarısız olur. İki yatay kaydırma çubuğunuz olacak; biri başlık için ve biri veriler için.
— vol7ron
4
<thead> içinde <th> genişliği belirtmezseniz çözümünüz çalışmaz
— Alexandru R
2
(Nispeten) yeni Stack Overflow standartlarına uymak için, bu yanıtı bağlantıdaki ilgili bitleri içerecek şekilde düzenleyebilir misiniz?
— Fund Monica'nın Davası
Kaynak nerede, Billy?
— mumluk
JavaScript veya önceden tanımlanmış değerlere başvurmadan, başlık ve (kaydırılabilir) tablo gövdesi arasındaki sütun genişliklerini senkronize etmek imkansızdır.
— rustyx
12

Sean Haddy'nin benzer bir soruya mükemmel çözümünü gördüm ve bazı düzenlemeler yapma özgürlüğünü kullandım :

  • Kimlik yerine sınıfları kullanın, böylece bir jQuery betiği bir sayfadaki birden çok tablo için yeniden kullanılabilir
  • Resim yazısı, thead, tfoot ve tbody gibi anlamsal HTML tablo öğeleri için destek eklendi
  • Kaydırma çubuğu isteğe bağlı yapıldı, böylece kaydırılabilir yükseklikten "daha kısa" olan tablolarda görünmeyecek
  • Kaydırma çubuğunu tablonun sağ kenarına getirmek için kaydırılan div'in genişliği ayarlandı
  • Konsepte erişen
    • enjekte edilen statik tablo başlığında aria-hidden = "true" kullanma
    • ve orijinal tead'i yerinde bırakarak, sadece jQuery ile gizlenip aria-hidden="false"
  • Farklı boyutlara sahip birden çok tablo örneği gösterildi

Sean ağır kaldırmayı yaptı. Matt Burland'a da tfoot'u desteklemeniz gerektiğine işaret ettiği için teşekkürler.

Lütfen http://jsfiddle.net/jhfrench/eNP2N/ adresinde kendiniz görün

— Jeromy Fransız
kaynak
Güzel, ama bir üstbilgi ve bir altbilgi istiyorsanız berbat eder !
— Matt Burland
3
Teşekkürler Matt, ayarlamayı yaptım.
— Jeromy French
Td ve th sınırları gösterirseniz, hizalamanın ince ayarlanması gerekir.
— dhochee
9

Thead ve tbody kullanmayı ve overflow: scroll ile tbody üzerinde sabit bir yükseklik ayarlamayı denediniz mi?

Hedef tarayıcılarınız nelerdir?

DÜZENLEME: Firefox'ta (neredeyse) iyi çalıştı - dikey kaydırma çubuğunun eklenmesi, yatay bir kaydırma çubuğuna da ihtiyaç duyulmasına neden oldu - iğrenç. IE sadece her bir td'nin yüksekliğini, olması gereken cismin yüksekliğini belirlediğim şeye ayarladı. İşte bulabildiğim en iyi şey:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— Chris Marasti-Georg
kaynak
1
IE6, IE7, FF, ... ama özellikle IE'yi hedeflemem gerekiyor
— minty
Tabloyu, genişliği% 100'den az olacak şekilde değiştirin, diyelim% 99 ve sorunla
— ilgilensin
2
overflow-x: hidden;ve overflow-y: autoayrıca yardım edin.
— justkt
7
Bu, firefox'ta çalışıyordu ve açık ve net olmayan bir koddu. Ancak, firefox'un daha yeni sürümlerinde bozuk.
— Rasmus Kaj
6
Bu çalışmaz çünkü "taşma" yalnızca "blok kapsayıcılar" ( w3.org/TR/CSS21/visufx.html#overflow ) için geçerlidir ve tablo kutuları "blok kapsayıcılar" değildir ( w3.org/TR/CSS21/ visuren.html # block-kutuları ).
— mhsmith
9

İhtiyacınız olan şey:

1) kaydırma yalnızca içerik kaydırma penceresinden daha büyük olduğunda gerçekleştiği için sınırlı yükseklikte bir tablo gövdesine sahip olabilir . Ancak tbodyboyutlandırılamaz ve bunu blockyapmak için bunu görüntülemeniz gerekir :

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Tablo üstbilgisi ve tablo gövdesi sütun genişliklerini yeniden eşitleyin , çünkü ikincisini blockalakasız bir öğe haline getirin. Bunu yapmanın tek yolu , aynı sütun genişliğini her ikisine de uygulayarak senkronizasyonu simüle etmektir .

Ancak, tbodykendisi bir blockşimdi olduğu için, artık a gibi davranamaz table. tableSütunları doğru şekilde görüntülemek için hala bir davranışa ihtiyacınız olduğundan, çözüm, satırlarınızın her birinin ayrı tableURL'ler olarak görüntülenmesini istemektir :

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(Bu tekniği kullanarak artık satırlara yayılamayacağınızı unutmayın).

Bunu yaptıktan sonra, sütun genişliklerini hem theadve hem de sütunlarında aynı genişliğe sahip olacak şekilde zorlayabilirsiniz tbody. Bunu yapamazsın:

  • her bir sütun için ayrı ayrı (belirli CSS sınıfları veya satır içi stil yoluyla), her tablo örneği için yapılması oldukça yorucu;
  • tüm sütunlar için aynı şekilde ( th, td { width: 20%; }örneğin 5 sütununuz varsa), bu daha pratiktir (her tablo örneği için genişlik ayarlamaya gerek yoktur) ancak herhangi bir sütun sayısı için çalışamaz
  • sabit bir tablo düzeni aracılığıyla herhangi bir sütun için eşit olarak sayılır.

Eklemeyi gerektiren son seçeneği tercih ederim:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

Burada , bu sorunun cevabından ayrılmış bir demo izleyin .

— Javarome
kaynak
açıklama için teşekkürler. Bunun gibi bir şeyin kaç şekilde yapılabileceği ve cevapların çoğu sadece bazı kodlar ve plunkr bağlantısı sunarak sizi kendi başınıza çözmeniz için bırakıyor.
— Paul Rooney
4

Düzenleme:   Bu çok eski bir cevaptır ve sadece 2000'lerde bir kez desteklendiğini ancak 2010'lardaki tarayıcı stratejisi bazı özellikler kaldırılmış olsa bile W3C özelliklerine uymak olduğu için düştüğünü göstermek için refah için buradadır. / footer, HTML5'ten önce beceriksizce belirtildi.

Kötü haber

Maalesef, kaydırılabilir tabloyu sabit ile işlemenin zarif bir yolu yoktur thead/ tfoot çünkü HTML / CSS özellikleri bu özellik hakkında çok net değildir .

Açıklamalar

Her ne kadar HTML 4.01 Şartname diyor thead/ tfoot/ tbody(? Tanıtılan) kaydırma tablo vücuda kullanılır:

Tablo satırları THEAD, TFOOT ve TBODY öğeleri [...] kullanılarak gruplandırılabilir [...]. Bu bölme, kullanıcı aracılarının, tablo başından ve ayağından bağımsız olarak tablo gövdelerinin kaydırılmasını desteklemesini sağlar.

Ancak FF 3.6'daki çalışan kaydırılabilir tablo özelliği, HTML / CSS spesifikasyonlarına uygun olmadığı için bir hata olarak değerlendirildiği için FF 3.7'de kaldırılmıştır. Bkz bu ve o FF böcek ilgili yorum.

Mozilla Geliştirici Ağı ipucu

Aşağıda, kaydırılabilir tablo için MDN yararlı ipuçlarının basitleştirilmiş bir sürümü bulunmaktadır,
bu arşivlenmiş sayfaya veya mevcut Fransızca sürüme bakın

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

Ancak MDN , bunun FF'de artık çalışmadığını da söylüyor :-(
IE8'de de test ettim => tablo da kaydırılamaz: - ((

— Olibre
kaynak
Kaydırılabilir tablo bağlantısı için MDN ipuçları, kenarlık daraltma hakkında konuştuğu ilgili bilgiler değildir. Belki sayfa 5 yıl geçtiği için değişti
— partizanos
Teşekkürler @partizanos Nihayet MDN geçmişinde orijinal wiki sayfasını buldum! Eski cevabım artık geçersiz görünüyor, ancak refah için yeni nesil geliştiriciler, 2000'lerde uygulanmanın mümkün ve kolay olduğunu
— bilecekler
3

Hala kimsenin buna bakıp bakmadığından emin değilim, ancak bunu daha önce yaptığım şekilde, tek orijinal tabloyu görüntülemek için iki tabloyu kullanmak - ilki sadece orijinal tablo başlık satırı ve hiçbir tablo gövde satırı yok (veya yapmak için boş bir gövde satırı) doğrular).

İkincisi ayrı bir div içindedir ve başlığı yoktur ve yalnızca orijinal tablo gövdesi satırları vardır. Ayrı div, daha sonra kaydırılabilir hale getirilir.

Div'deki ikinci tablo, HTML'deki ilk tablonun hemen altına yerleştirilir ve sabit bir başlığı ve kaydırılabilir bir alt bölümü olan tek bir tablo gibi görünür. Bunu yalnızca Safari, Firefox ve IE'de (her birinin Bahar 2010'daki en son sürümleri) test ettim ama hepsinde işe yaradı.

Sahip olduğu tek sorun, ilk tablonun bir gövde olmadan doğrulanmaması (W3.org doğrulayıcısı - XHTML 1.0 katı) ve içeriği olmayan bir tane eklediğimde boş bir satıra neden olmasıydı. Bunu görünmez hale getirmek için CSS kullanabilirsiniz, ancak yine de sayfada yer kaplar.

— Mick
kaynak
Fazladan sıra nasıl yer kaplar? display: none;Kaynakta yer kastetmediğiniz sürece, kullanırsanız herhangi bir ekran alanı kaplaması gerekmez ..?
— ClarkeyBoy
3

Bu çözüm Chrome 35, Firefox 30 ve IE 11'de çalışır (diğer sürümler test edilmemiştir)

Saf CSS'si: http://jsfiddle.net/ffabreti/d4sope1u/

Her şey görüntülenecek şekilde ayarlandı: blok, tablonun bir yüksekliğe ihtiyacı var:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— Fernando Fabreti
kaynak
2

Bu, bizim bir uygulamamız için böyle bir ızgarayı uygulamaya çalışırken büyük baş ağrısına neden oldu. Orada çeşitli teknikleri denedim ama her birinin sorunları vardı. En yakın geldiğim, Flexigrid gibi bir jQuery eklentisi kullanmaktı ( alternatifler için http://www.ajaxrain.com adresine bakın), ancak bu, ihtiyacım olan% 100 geniş tabloları desteklemiyor gibi görünüyor.

Sonunda yaptığım şey kendimi yuvarlamaktı; Kaydırma Firefox destekler tbodygözatıcıdan böylece unsurları kokladı ve kullanılan ilgili CSS sonra diğer tarayıcılar için ben kullanılmak üzere ayarlanmış iki ayrı tablo kullanılan kaydırma yapmak için, ve (daha fazla ayrıntı istiyorsanız sormak ... taşma vs, yükseklik ayarı) table-layout: fixedbir boyutlandırma kullanan Belirtilen boyutu aşmaması için garanti edilen algoritma (normal tablolar içerik sığamayacak kadar geniş olduğunda genişleyecektir). Her iki tabloya da aynı genişlikler vererek sütunlarının hizalanmasını sağladım. İkincisini kaydırmak için bir div setine sardım ve kenar boşlukları olan biraz jiggery pokery ile istediğim görünümü ve hissi elde etmeyi başardım.

Bu cevap bazı yerlerde biraz belirsiz geliyorsa özür dilerim; Fazla zamanım olmadığı için hızlı yazıyorum. Daha fazla genişletmemi istiyorsanız bir yorum bırakın!

— Luke Bennett
kaynak
Bu eski konuyu direttiğim için üzgünüm ama bunu nasıl çözdüğünü gerçekten bilmem gerekiyor. FF çalışıyor ama IE / WebKit tarayıcılarım yok. Lütfen yapabildiğin zaman yardım et.
— Alfero Chingono
2

İşte IE ve FF için gerçekten işe yarayan bir kod (en azından):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

Daha net hale getirmek ve ayrıca IE ve ayrıca FF'de düzgün çalışmasını sağlamak için orijinal kodu değiştirdim.

Orijinal kod BURAYA

— Daniel Costa
kaynak
1
IE7 / 8'de bu yalnızca Quirks Modunda çalışır ve bir belge türü eklediğinizde çalışmayı durdurur, yani<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

İşte benim alternatifim. Ayrıca üstbilgi, gövde ve altbilgi için farklı DIV'ler kullanır, ancak pencere yeniden boyutlandırma ve arama, kaydırma, sıralama, filtreleme ve konumlandırma için senkronize edilir:

CD listelerim

Tabloları görmek için Jazz, Classical ... düğmelerine tıklayın. JavaScript kapalı olsa bile yeterli olacak şekilde ayarlanmıştır.

IE, FF ve WebKit'te (Chrome, Safari) sorunsuz görünüyor.

— Gitti
kaynak
1

Üzgünüm, sorunuza verilen tüm yanıtları okumadım.

Evet burada istediğin şey (ben zaten yaptım)

Benzer stil için aynı sınıf adına sahip iki tabloyu kullanabilirsiniz; bunlardan biri yalnızca masa başlığıyla, diğeri satırlarınızla. Şimdi bu tabloyu overflow-y: auto OR scroll ile sabit yüksekliğe sahip bir div içine yerleştirin.

— Sanuj
kaynak
1

Yukarıdaki önerilerle yaşadığım temel sorun, tableorter.js'yi takabilmek VE belirli bir maksimum boyutla sınırlandırılmış bir tablo için başlıkları kaydırabilmekti. Sonunda , kayan başlıkları sağlayan ve sıralamanın çalışmaya devam etmesine izin veren jQuery.floatThead eklentisine rastladım .

Aynı zamanda kendisini benzer eklentilere karşı gösteren güzel bir karşılaştırma sayfasına sahiptir .

— Guy Hollington
kaynak
1

Canlı JsFiddle

Sadece HTML ve CSS ile mümkündür

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
Snippet'i genişlet

— Md. Rafee
kaynak
0

JavaScript'i burada kullanmak benim çözümümse, Tüm sütunlarda (pikseller!) Sabit genişlikte bir tablo oluşturun Scrollify sınıfını tabloya ekleyin ve bu javascript + jquery 1.4.x set yüksekliğini css veya stilde ekleyin!

Test: Opera, Chrome, Safari, FF, IE5.5 ( Epic script başarısız ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

Düzenleme: Sabit yükseklik.

— Peter
kaynak
0

Bunu javascript (kitaplık yok) ve CSS ile yapıyorum - tablo gövdesi sayfayla birlikte kayıyor ve tablonun sabit genişlik veya yükseklikte olması gerekmiyor, ancak her sütunun bir genişliği olmalı. Ayrıca sıralama işlevini de sürdürebilirsiniz.

Temel olarak:

  1. HTML'de, tablo başlığı satırını ve tablo gövdesini konumlandırmak için kapsayıcı div'ler oluşturun, ayrıca üstbilgiyi geçerken tablo gövdesini gizlemek için bir "mask" div oluşturun

  2. CSS'de tablo bölümlerini bloklara dönüştürün

  3. Javascript'te tablo genişliğini alın ve maskenin genişliğini eşleştirin ... sayfa içeriğinin yüksekliğini alın ... kaydırma konumunu ölçün ... tablo başlığı satır konumunu ve maske yüksekliğini ayarlamak için CSS'yi değiştirin

İşte javascript ve bir jsFiddle DEMO.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— Deborah
kaynak
Ancak demonuzda tablo başlığı yerinde kalmaz, sadece kaydırılır. (Chrome burada.)
— Sz.
Bunu Chrome'da görmüyorum. Sarı ile vurgulanan hücreleri, başlık için kırmızıyla gösterilen talimatlarla karıştırmadığınızdan emin misiniz? Başlık hücreleri en üstte ve gri üzerinde gri ("Sütun 1", "Sütun 2" vb.).
— Deborah
0

Benim için, genişliği tablo CSS'sinden kaldırana kadar kaydırmayla ilgili hiçbir şey gerçekten işe yaramadı. Başlangıçta, tablo CSS'si şuna benziyordu:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

Genişliği kaldırır kaldırmaz:% 100; tüm kaydırma özellikleri çalışmaya başladı.

— Matthew Park
kaynak
0

Yeterince düşük standartlarınız varsa;) yalnızca bir gövdesi olan bir tablonun hemen üzerine yalnızca bir başlık içeren bir tablo yerleştirebilirsiniz. Yatay olarak kaymaz, ancak buna ihtiyacınız yoksa ...

— M610
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.