Dikey bir kaydırma çubuğu görünecek şekilde tablonun yüksekliği nasıl belirtilir?

101

Sayfamda birçok satır içeren bir tablom var. Tablonun yüksekliğini 500px olarak ayarlamak istiyorum, öyle ki tablonun yüksekliği bundan büyükse, dikey bir kaydırma çubuğu görünecektir. heightÜzerinde CSS özelliğini kullanmaya çalıştım tableama çalışmıyor.

css css-tables

— Misha Moroshko
kaynak

Belki kullanmak max-heightsadece yerine heightolmaya tablonun yüksekliğini zorlar olarak ikincisi500px

— Fred

Başlık satırının kaydırılmasını önlemekle ilgili ikinci bir soru sormak isteyebilirsiniz. ;)

— Bill Bingham

Ayrıca bkz. Stackoverflow.com/questions/1587927/…

— Alex Nolasco

Yanıtlar:

173

overflowCSS özelliğini kullanmayı deneyin . Sadece yatay taşma ( overflow-x) ve dikey taşma ( overflow-y) davranışını tanımlayan ayrı özellikler de vardır .

Yalnızca dikey kaydırmayı istediğiniz için şunu deneyin:

table {
  height: 500px;
  overflow-y: scroll;
}

DÜZENLE:

Görünüşe göre <table>unsurlar overflowmülke saygı göstermiyor . Bunun nedeni, <table>öğelerin display: blockvarsayılan olarak işlenmemesi (aslında kendi görüntüleme türlerine sahip olmaları) olabilir. Öğeyi bir blok türü olarak overflowayarlayarak özelliği çalışmaya zorlayabilirsiniz <table>:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Bunun öğenin% 100 genişliğine sahip olmasına neden olacağını unutmayın, bu nedenle sayfanın tüm yatay genişliğini kaplamasını istemiyorsanız, öğe için de açık bir genişlik belirtmeniz gerekir.

— AgentConundrum
kaynak

Bu yine de yüksekliği sınırlamaz.

— Fred

Hayır, öyle, sadece display:blockbir div jsfiddle.net/TSGSA/1

— Fred

@Fred: Büyük beyinler aynı düşünür. Siz yorum yaparken cevabımı güncelledim. :)

— AgentConundrum

Bu cevap bana gerçekten yardımcı oldu, ancak bunu tablo etiketine uygulamak yerine, kaydırma sırasında başlığın sabit kalmasına izin vermek için tbody için yapılmalıdır. Sonra, teaddeki kaydırma çubuğunun üzerindeki alana göre sıralanacak bazı stil var.

— David

Bunu tbody üzerinde kullanacaksanız, ekranı eklediğinizden emin olun: tead'e blok (ve muhtemelen tfoot) yoksa biraz delirebilirler. Görünüşe göre sorun şu ki, bunu bir kez yaptığınızda, thead ve tbody arasındaki bağı kopardınız: birincinin sütunları, ikincisinin genişliğinin farkında değil. Yani onu yamalıyorsun ve kaygan yokuştan aşağı iniyorsun. "Güzellik için öldüm ..."

— Cuse70

Tabloyu başka bir elemanın içine sarmanız ve o elemanın yüksekliğini ayarlamanız gerekir. Satır içi css ile örnek:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

— Kara Şahin
kaynak

Bu, tbody kaydırılırken tead'i yerinde tutmaya izin vermez.

— David

Bu gereklilik asıl soruda yer almıyor.

— Dark Falcon

Ayrıca, diğer (kabul edilen) cevap da tead'i yerinde tutmaz.

— Brock Adams

Bu yöntemle hala orada bir başlık varmış gibi görünmesini sağlayabilirsiniz. Tablonun başlığını gizlersiniz, ardından içinde başlık bulunan ilk tablonun üzerinde ikinci bir tablo oluşturursunuz. Ardından, her iki tablonun stilini display:table;, satırlarına sahip olacak display:table-row;ve hücrelerine sahip display:table-cell;olacak şekilde biçimlendirin; iki tablo eşleşecek ve tekmiş gibi görünecektir. (NOT: Bu çok büyük tablolarda çalışmaz; temelde, mümkün olduğunda onları eşleştirir. Bu tekniği birçok kez kullandım.)

— levininja

Elbette. Göreli boyutları kullanmak için ebeveynin boyutu belirtilmelidir. Örneğin: jsfiddle.net/hz8wy

— Dark Falcon

tablonun yüksekliğini ayarlamak için, önce "display: block" css özelliğini ayarlamanız ve ardından "width / height" özelliklerini eklemeniz gerekir. Ben stil tabloları öğrenmek için bu Mozilla Madde çok iyi bir kaynak bulmak: Bağlantı

— krupesh Anadkat
kaynak