Duyarlı tablolar, ben verileri içeren bir tablo var akıllı yolu

Question

. Tablo verileri. Ve buna benziyor.

this fiddle bakınız. Eğer yatay kaydırma çubuğu alamadım böylece bu gibi görünmek tablo için, daha dar bir ekranda görüntülenen zaman istediğim şey Şimdi

, ve bu aynı görsel yapıyı korur:

(veya this fiddle gibi isterseniz.)

Şimdi benim sorum, bunu nasıl yaparsınız edilir? Bir CSS tek yolu tercih ediyorum, ama şimdiye kadar, sadece CSS bunu yönetilen değil. '

HTML oluşturulan sunucu tarafında, yani pencere genişliğine bağlı olarak iki düzenlerden birini oluşturabilir (ikinci keman. CSS eşdeğerleri yoktur rowspan özellik içerir) ama sonra gitmeyeceklerini t yeniden boyutlandırma penceresine yanıt verir.

Küçük bir Javascript'e karşı değilim, ama bu durumda, ilk tabloyu bir pencerede yeniden boyutlandırmak için yeniden boyutlandırmak, hücre tarafından yeniden ayrılmalı ve hücre tarafından yeniden oluşturulmalı ve sanırım bu overkill . Hala tüm işi yapabilecek bir medya sorgusu arıyorum.

biraz Deney, ben this close geldi, ama bu IE8 ve IE9 çalışmaz.

Peki, bunun üstesinden gelmek için herhangi bir fikri olan var mı? ideal bir çözüm tablo değişen yükseklik hücreleri (metin ya da daha fazla 2 satır) ve herhangi bir sayıda sütun üzerinde çalışmaya devam eder.

Answer 1

satır içi öğeleri engellemeyecek olabilir. Ben oynamak çok zaman olmadı, ancak aşağıdaki gibi bir şey:

#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
#content td { 
    display: inline-block; 
    width: 100px; 
} 

Yine de değil güzel yaratılması bu!

http://jsfiddle.net/8H3bN/

Answer 2

ya html ortam sorgusuna göre css özellikleri için stilleri değiştirebilir aynıdır daha iyi bir çözüm fiddle

@media only screen and (min-width: 769px) { 
     #content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
} 
@media only screen and (max-width: 768px) { 
#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content tr { 
    height:4em; border-bottom:1px solid; 
} 
#content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
    height:4em; 
} 
#content td { 
    padding:.07em .2em; 
    white-space:nowrap; 
    height:1.4em; 
    display:inline; 
} 
#content td:not(:last-child)::after { 
    display:block; content:''; 
    height:0; 
    border-bottom:1px solid; 
} 

} 

olası bir çözüm kullanmaktır bazen daha fazla katta ediyorum medya, ilgili blokları gizlemek ya da stilleri fiddle Bunun ne istediğinizi tam olarak değil biliyorum

@media only screen and (max-width: 768px) { 
    #content{ 
     display:none !important; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #content2{ 
     display:none !important; 
    } 
} 

Answer 3

content2 daha küçük masa kimliği değişti ama yardımcı olabilecek bir referans olarak bir süre önce jsfiddle oluşturuldu:

jsfiddle.net/webbymatt/MVsVj/1

esasen biçimlendirme hiçbir JS olduğunu ve beklendiği gibi içerik sadece yeniden akar, aynı kalır. Veri türü özniteliğini tablo hücresine eklemeniz yeterlidir.

Answer 4

Bunu denetleyin CodePen.

Bu çözümü çok önce css-tricks.com adresinde buldum.

tablo biraz dağınık alır:

<table> 
    <tr> 
     <td> 
      Description 1 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td class="text-center">Data 1A</td> 
         <td class="text-center">Data 1B</td> 
         <td class="text-center">Data 1C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td> 
      Description 2 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td>Data 2A</td> 
         <td>Data 2B</td> 
         <td>Data 2C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
</table> 

Ve bu css geçerli:

/* Small display targeting */ 
    @media only screen and (max-width: 767px) { 
     /* Force table to not be like tables anymore */ 
     .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
      display: block; 
     } 

     /* Hide table headers (but not display: none;, for accessibility) */ 
     .responsive thead tr { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
     } 

     .responsive td { 
      /* Behave like a "row" */ 
      position: relative; 
     } 

     .responsive td:before { 
      /* Now like a table header */ 
      position: absolute; 
     } 
    }