Kaydırma çubuğu bir html tablosunda nasıl görüntülenir

86

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.

Bu url'de yöntem 2 gibi görünmesini istiyorum: http://www.cssplay.co.uk/menu/tablescroll.html

Bunu yapmayı denedim ama kaydırma çubuğu görünmüyor:

tbody {
  height: 80em;
  overflow: scroll;
}
<table border=1 id="qandatbl" align="center">
  <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
  </tr>

  <tbody>
    <tr>
      <td class='qid'></td>
      <td class="options"></td>
      <td class="duration"></td>
    </tr>
  </tbody>
</table>
Snippet'i genişlet

html  css  scroll  html-table  overflow 
— BruceyBandit
kaynak
Örnek yöntemdeki kodu neden kullanmıyorsunuz? <tbody>Maalesef kullanamazsınız .
— Mike Park

Yanıtlar:

164

Bunun gibi bir şey mi?

http://jsfiddle.net/TweNm/

Buradaki fikir, bir CSS özelliğine sahip olan <table>statik olmayan bir şekilde konumlandırılmış bir öğeyi sarmalamaktır . Ardından elemanları kesinlikle içinde konumlandırın .<div>overflow:auto<thead>

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
          <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
          <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
          <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
          <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
          <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
          <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
          <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
          <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
          <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
          <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
          <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
          <!-- etc... -->
          <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>
Snippet'i genişlet

— Richard JP Le Guen
kaynak
15
Genişliği sabit sütun olmamasına ne dersiniz?
— Fractaliste
3
Cevabınızı denedim ama başlık sütunları hizalı değil. Tablonuzu kopyaladığım vücut etiketinin içindeki stil etiketinde sadece css'nizi kullandım
— Antonio
Harika çözüm, ancak bununla ilgili sorunlar yaşıyorum. Bir satırı gizlemeye ve görüntülemeyi ayarlamaya çalıştığınızda: hiçbiri satırlar arasında bazı beyaz boşluklar yoktur. Normal masada durum böyle değil. Herhangi bir fikir, ipucu veya öneriniz var mı?
— Daniil Shevelev
@Antonio: Aynı sorunu yaşadım (ortalanmış * üstbilgi sütunları hizasız görünüyor), ancak eklemek transform: translateX(-50%)benim için hile yaptı [* ortalanmış, Firefox'taki standart stil, bu yanıtın JSFiddle'ındaki "CSS'yi normalleştir" seçeneğiyle kaldırıldı]
— Sora.
46

Kendinizi sabit boyuta sahip ve stil olarak ayarlamanız <table>gereken bir <div>şeye eklemelisiniz .<div>overflow: scroll

— Hossein Barzegari
kaynak
1
div için 500px olarak yükseklik verdi ve iyi çalıştı. <div style = "overflow: scroll; height: 500px;">
— Ziggler
3
Herkes neden bu kadar karmaşık hale getirdi bilmiyorum. Kabul edilen cevap bu olmalıdır.
— amallard
1
Bu, açık ara en kolay çözümdür. Taşma ve sabit yüksekliğe sahip bir div eklemeyle ilgili uyarılar olabilir, ancak bu çözüm en azından sizi doğru yönde ayarlayacaktır.
— lsimonetti
1
Harika cevap dostum! Şerefe
— :)
1
Kabul edilen cevap bu olmalıdır. Basit, doğrudan konuya ve onunla başka hiçbir şeyi yok etmiyorum.
— Çok deniyorum ama daha çok ağlıyorum
40

Kabul edilen yanıt iyi bir başlangıç ​​noktası sağladı, ancak çerçeveyi yeniden boyutlandırırsanız, sütun genişliklerini değiştirirseniz veya hatta tablo verilerini değiştirirseniz, başlıklar çeşitli şekillerde karışacaktır. Gördüğüm diğer her örnekte benzer sorunlar var veya masanın düzenine bazı ciddi kısıtlamalar getiriyor.

Sanırım sonunda tüm bu sorunları çözdüm. Çok fazla CSS gerektirdi, ancak nihai ürün normal bir tablo kadar güvenilir ve kullanımı kolay.

OP tarafından referans verilen tabloyu kopyalamak için gerekli tüm özelliklere sahip bir örnek: jsFiddle

Referansla aynı olması için renklerin ve sınırların değiştirilmesi gerekecekti. Bu tür değişikliklerin nasıl yapılacağına ilişkin bilgiler CSS yorumlarında verilmektedir.

İşte kod:

/*the following html and body rule sets are required only if using a % width or height*/
/*html {
width: 100%;
height: 100%;
}*/
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
  text-align: center;
  background: white;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/
  height: 188px/*100%*/; /*set table height here; can be fixed value or %*/
  min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 20px;
  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid black;
  height: 100%;
  padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
  top: 0;
  background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height: 100%;
  overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
  overflow-x: hidden;
  border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width: 100%;
  border-spacing: 0;
  margin-top: -20px; /*inverse of column header height*/
  /*margin-right: 17px;*/ /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position: absolute;
  top: -20px; /*inverse of caption height*/
  margin-top: -1px; /*inverse of border-width*/
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /*match column header height*/
  border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content: "";
  display: block;
  min-height: 20px; /*match column header height*/
  padding-top: 1px;
  border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 100px;
  top: -1px; /*inverse border-width*/
  background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid black;
  top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid black;
  padding: 0 6px 0 6px;
  height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/
<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"></div></th>
            <th><div label="Column 2"></div></th>
            <th><div label="Column 3"></div></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>

<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->
Snippet'i genişlet

— DoktorDestructo
kaynak
harika iş. Ancak, 15 sütunlu bir tablom var ve şu anda yatay bir kaydırma çubuğu olmadan tabloyu sayfaya da dahil edemiyorum. Css'inizi, güzel kodlanmış css'inizi, daha dinamik genişlikli sütunları barındırmak için değiştirmeyi denedim, ancak tablo genişliğinden başka değiştirdiğim hiçbir şey bir fark yaratmıyor. Tablo genişliğini% 100 olarak değiştirirsem, tablo tablonun genişliğinde oluşturulur, ancak sütun genişlikleri sarılmayacağı için 15 veri sütununu hala göremiyorum. Neredeyse kewl görünen bir kaydırma masam var, bu yüzden herhangi bir yardım takdir edildi.
— nanker
bir saniye bekleyin, yatay kaydırma çubuğu yok, tablo kesiliyor.
— nanker
@nanker Yatay kaydırmaya ihtiyacınız varsa ve küçük bir JavaScript kullanmak istiyorsanız, bu yanıtı kontrol etmelisiniz . Bildiğim kadarıyla kayan bir tablo yapmanın en iyi yolu bu. Bu cevabı gönderirken sadece CSS ile yatay kaydırma yapmanın iyi bir yolu yoktu, ancak bir süredir buna bakmadım, bu yüzden şimdi neyin mümkün olduğunu bilmiyorum.
— DoctorDestructo
Mükemmel iş. Birden çok başlık satırı için nasıl ince ayar yapılacağı hakkında yorum yapabilir misiniz? Basitçe <tr><th></th>..</tr>yapıyı açıkça tekrarlamak işe yaramaz. Teşekkürler.
— David I. McIntosh
@ DavidI.McIntosh Çok satırlı bir başlık bu tekniği kullanırken yanıltıcı olabilir. Satır eklemek kolay olurdu, ancak aralarındaki yatay sınırları nasıl elde edeceğinizden emin değilim. Herhangi bir nedenle JS kullanamıyorsanız, önceki yorumumda bağladığım JavaScript çözümünü denemek isteyebilirsiniz.
— DoctorDestructo
3

İçeriğimi iki tabloya ayırarak bu sorunu çözdüm.

Tablolardan biri başlık satırıdır.

Saniyeler de <table>etikettir, ancak <div>statik yükseklik ve taşma kaydırma ile sarmalanır .

— Zvi
kaynak
1

Amacınıza bağlı olarak (benimki bir arama çubuğunun otomatik doldurma sonuçlarıydı) yüksekliğin değiştirilebilir olmasını ve kaydırma çubuğunun yalnızca yükseklik bunu aşarsa var olmasını isteyebileceğinizi unutmayın.

Bunu istiyorsanız, height: x;ile max-height: x;ve overflow:scrollile değiştirinoverflow:auto .

Ek olarak, overflow-xve overflow-yisterseniz kullanabilirsiniz ve tabii ki aynı şey yatay olarak çalışır.width : x;

— Ben
kaynak
0

Bahsedilen tüm çözümlerin işe yaramadığı noktaya gelirseniz (benim için olduğu gibi), şunu yapın:

  • İki tablo oluşturun. Biri başlık için ve diğeri vücut için
  • İki tabloya farklı üst kapsayıcılar / div'ler verin
  • İçindekilerin dikey kaydırılmasına izin vermek için ikinci tablonun div stilini belirleyin.

Bunun gibi, senin içinde HTML

<div class="table-header-class">
    <table>
       <thead>
          <tr>
            <th>Ava</th>
            <th>Alexis</th>
            <th>Mcclure</th>
          </tr>
       </thead>
    </table>
</div>
<div class="table-content-class">
   <table>
       <tbody>
          <tr>
            <td>I am the boss</td>
            <td>No, da-da is not the boss!</td>
            <td>Alexis, I am the boss, right?</td>
          </tr>
       </tbody>
    </table>
</div>

Ardından, ikinci tablonun üst öğesinin stilini, CSS

    .table-content-class {
        overflow-y: scroll;    // use auto; or scroll; to allow vertical scrolling; 
        overflow-x: hidden;    // disable horizontal scroll 
    }
— Kaka Ruto
kaynak
Bu, Zvi'nin bir yıl önceki cevabıyla aynı uygulama.
— TylerH
0

sadece masaya ekle 

style="overflow-x:auto;"


<table border=1 id="qandatbl" align="center" style="overflow-x:auto;">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>
Snippet'i genişlet

style = "overflow-x: auto;" `

— Öğrenim Yeri Ustası
kaynak
Soru, sütun başlığı sabit kalırken bir tablo gövdesinin dikey olarak nasıl kaydırılacağıydı.
— giraffedata
0

Çok kolay, tabloyu overflow-y:scroll;ve overflow-x:scrollözelliklerine sahip bir div içine sarın ve div'in genişliğe ve uzunluğa tablodan daha küçük olmasını sağlayın. ÇALIŞACAK!!!

— Misafir
kaynak
Tamam, bir sonraki cevaba ekleyeceğim.
— Konuk
Tamam, yaptım, henüz yığın taşması durumunda kodu nasıl düzgün şekilde girintileme yapacağımı bilmiyorum.
— Konuk
0

CSS: div{ overflow-y:scroll; overflow-x:scroll; width:20px; height:30px; } table{ width:50px; height:50px; }

Tabloyu ve masa etrafındaki DIV'yi istediğiniz boyutta yapabilirsiniz, sadece DIV'nin tablodan daha küçük olduğundan emin olun. DIV'nin içindeki tabloyu İÇERMELİDİR.

— Misafir
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.