% 100 genişlik tablası taşan div kabı


137

Ben onun üst konteyner taşan bir html tablo ile ilgili sorunlar yaşıyorum.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}
<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

Hem üstbilgi metnini hem de tablo hücresi metnini, kabına düzgün bir şekilde sığacak şekilde sarmaya nasıl zorlayabilirim? Ben sadece bir CSS yöntemi tercih ediyorum, ama aynı zamanda kesinlikle gerekirse Javascript (veya jQuery) kullanmaya açıkım.

Yanıtlar:


254

Tamamen " div'e sığdır " perspektifinden tablo sınıfınıza ( jsfiddle ) aşağıdakileri ekleyin :

table-layout: fixed;
width: 100%;

Sütun genişliklerinizi istediğiniz gibi ayarlayın; aksi takdirde, sabit mizanpaj algoritması tablo genişliğini sütunlarınıza eşit olarak dağıtır.

Hızlı başvuru için, tablo düzeni algoritmaları, benim vurgu:

  • Sabit ( kaynak )
    Bu (hızlı) algoritmada tablonun yatay yerleşimi hücrelerin içeriğine bağlı değildir ; yalnızca tablonun genişliğine, sütunların genişliğine ve kenarlıklara veya hücre aralığına bağlıdır.
  • Otomatik ( kaynak )
    Bu algoritmada (genellikle en fazla iki geçiş gerektirmez), tablonun genişliği sütunlarının genişliği ( içeriğe göre belirlendiği gibi) (ve araya giren sınırlar ) ile verilir.

    [...] Bu algoritma, kullanıcı düzenleyicisinin son düzeni belirlemeden önce tablodaki tüm içeriğe erişmesini gerektirdiğinden ve birden fazla geçiş gerektirebileceğinden bu algoritma verimsiz olabilir.

Her algoritmanın özelliklerini görmek için kaynak belgelere tıklayın.


54

Eklemeyi deneyin

word-break: break-all 

tablonuzdaki CSS'ye ekleyin.

Bu, tablo hücrelerindeki kelimeleri, tablonun içeren div'den daha geniş olmayacağı şekilde kırılmasına neden olur, ancak tablo sütunları hala dinamik olarak boyutlandırılır. jsfiddle demosu .


10
Daha da iyisiword-wrap: break-word;
Apolo

1
@Apolo - Kabul etti! Bunu orijinal jsfiddle demomda da kullandım (yukarıdaki cevap gövdesindeki bağlantıya bakın).
Jon Schneider

1
Blink tarayıcılar word-break: break-wordhangisinin daha iyi çalıştığını gösterir.
Volvox

overflow-wrapstandartlaştırılmış olduğundan mülk kullanmak daha iyidir
Romko

18

Ekle display: block;ve overflow: auto;için .my-table. Bu, 280pxuyguladığınız sınırı aşan her şeyi kesecektir . Bunun gibi kelimeler pélagosthroughdaha geniş olduğundan bu gereksinimle "güzel görünmesini" sağlamanın bir yolu yoktur 280px.


Sadece benim durumum için: Tüm ana genişliğe uyacak şekilde tabloya ihtiyacım vardı (yüksek çözünürlüklerde), bu yüzden tabloyu bir div ile çevreledim ve stillerinizi ona uyguladım. Şimdi tablo tüm ebeveynin genişliğini kullanmaya çalışır, ancak tablo içeriği taşıyorsa kaydırma çubuğu görünür.
manuman94

2

Şunlara eklemeyi deneyin td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

taşan tds yeni satırla hizalanacaktır.


1

Eh, senin kısıtlamaları göz önüne alındığında, ben ayar düşünüyorum overflow: scroll;üzerinde .pagediv muhtemelen tek seçenektir. 280 piksel oldukça dar ve yazı tipi boyutunuz göz önüne alındığında, kelime kaydırma tek başına bunu yapmaz. Bazı kelimeler sadece uzun ve kaydırılamaz. Yazı tipi boyutunuzu büyük ölçüde azaltabilir veya taşma ile ilerleyebilirsiniz: kaydırma.


1

CSS'nizi aşağıdakilere güncelleyin: bu düzeltilmelidir

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}
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.