Responsywne tabele, sprytny sposób

Question

Mam tabelę zawierającą dane. Dane tabelaryczne. I wygląda to tak.

Zobacz this fiddle.

Teraz co chciałbym jest, gdy jest wyświetlany na ekranie węższym, na stole, aby wyglądać tak, tak, aby nie dostać poziomego paska przewijania i utrzymuje tę samą strukturę wizualną:

(lub jeśli chcesz, jak this fiddle.)

teraz moje pytanie brzmi, jak to zrobić? Wolę tylko CSS, ale jak dotąd nie udało mi się tego zrobić tylko w CSS. (Drugie skrzypce zawiera rowspan atrybuty, które nie mają odpowiedników CSS).

HTML jest generowane po stronie serwera, więc może wygenerować jeden z dwóch układów w zależności od szerokości okna, ale to byłoby miło” t reagować na zmianę rozmiaru okna.

Nie jestem przeciwny niewielkiemu Javascriptowi, ale w tym przypadku, aby przetłumaczyć pierwszą tabelę na drugą przy zmianie rozmiaru okna, należy ją rozebrać i przebudować, komórka po komórce, i myślę, że to przesada . Nadal szukam zapytania o media, które może wykonać całą pracę.

Trochę eksperymentując, przyszedłem this close, ale to nie działa w IE8 i IE9.

Czy ktoś ma pomysły na rozwiązanie tego problemu? Idealne rozwiązanie działa na komórki tabeli o różnej wysokości (2 linie tekstu lub więcej) i dowolną liczbę kolumn.

Answer 1

Można wbudować blokowanie elementów. Nie miałem zbyt wiele czasu na grę, ale coś takiego:

#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; 
} 

To nie jest najpiękniejsze stworzenie!

http://jsfiddle.net/8H3bN/

Answer 2

ya jak twój html to samo można zmieniać style dla właściwości CSS według zapytania mediów lepszym rozwiązaniem byłoby być- 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; 
} 

} 

jednym z możliwych rozwiązań jest użycie zapytań o media i ukryć odpowiednie bloki lub odpowiednio zmienić style

Oto fiddle
zmienił mniejszy id stół do content2

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

Answer 3

wiem, że to nie jest dokładnie to, co chcesz, ale ja stworzył jsfiddle jakiś czas temu jako odniesienie, które mogą pomóc: jsfiddle.net/webbymatt/MVsVj/1

zasadniczo znacznik pozostaje taki sam, nie ma żadnego JS, a treść po prostu zmienia się zgodnie z oczekiwaniami. wystarczy dodać atrybut typu danych do komórki tabeli.

Answer 4

Sprawdź to CodePen.

Znalazłem to rozwiązanie dawno temu w css-tricks.com.

tabeli robi się trochę Messy:

<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> 

I to jest CSS:

/* 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; 
     } 
    }