Responsive "table"

Question

Mam tabelę HTML, która jest zbyt szeroka dla małych ekranów. Próbuję pozbyć się tej tabeli i użyć list i elementów div, aby uzyskać bardziej responsywny projekt.

Tu jest mój HTML wymyśliłem:

<ul> 
    <li class="fixture"> 
     <div class="fixture-date">01/09/2014 20:00</div> 
     <div class="fixture-details"> 
      <div class="home-team">Team A</div> 
      <div class="result">Result</div> 
      <div class="away-team">Team B</div> 
     </div> 
     <ul class="forecasts"> 
      <li class="player-forecast"> 
       <div class="player">Player 1</div> 
       <div class="forecast">Forecast</div> 
       <div class="score">3.0</div> 
      </li> 
      ... 
     </ul> 
    </li> 
    ... 
</ul> 

chcę, żeby wyglądać na małych ekranach:

---------------------------------------------------- 
| 01/09/2014           | 
|----------------------------------------------------| 
|    Team A | Result | Team B    | 
|----------------------------------------------------| 
| Player 1  | Forecast |    3.0 | 
|----------------------------------------------------| 
| Player 2  | Forecast |    0.0 | 

i jak to na szerokich ekranów:

            | Player 1 | Player 2 | 
------------------------------------------------------------------------------------| 
| 01/09/2014 |  Team A | Result | Team B  | Forecast | 3.0 | Forecast | 0.0 | 
|-----------------------------------------------------------------------------------| 
| 01/09/2014 |  Team C | Result | Team D  | Forecast | 1.0 | Forecast | 2.0 | 

Ustawiłem skrzypce z tym, co dotychczas osiągnąłem: http://jsfiddle.net/vwanr2gx/

Nie znalazłem sposobu na umieszczenie wszystkich "komórek" dla urządzenia w tym samym wierszu i zachowanie tej samej szerokości dla "komórek" w tej samej "kolumnie". Nie mogę zakodować na sztywno szerokości komórek dla zespołów, ponieważ nie znam zawartości (wygenerowanej przez użytkownika).

Próbowałem użyć tabel css, ale ponieważ mam zagnieżdżone div, to automatycznie tworzy nowe wiersze (patrz skrzypce).

Jak mogę to osiągnąć (jeśli to możliwe)?

Answer 1

Nie wiem, czy znalazłeś rozwiązanie dla tego pytania, ale tutaj jest jeden, który opracowałem. Oto szczegóły:

• Przechowywane kod HTML (zastąpione kilka ul/li tagi z div, ale prawdopodobnie będzie pracować ze swoimi wymienia tylko drobne zmiany w stylach) i zmienił CSS w zależności od mediów szerokość.
• Jeśli jest to "duży ekran", wówczas wyświetlany będzie tylko pierwszy rząd nazw graczy.
• float:left, float:left, float:left ...

można zobaczyć przykład pracuje tu: http://jsfiddle.net/yuL0pvgt/1/. I to jest kod CSS, którego użyłem:

* { 
    border-collapse:collapse; 
    margin:0px; 
    padding:0px; 
    font-size:12px; 
} 
#mytable { 
    display:table; 
    width:100%; 
} 
.fixture { 
    display:table-row; 
} 
.fixture-date { 
    display:block; 
} 
.fixture-details { 
    display:block; 
    height:auto; 
    overflow:auto; 
} 
.fixture-details .home-team { 
    float:left; 
    width:40%; 
    text-align:right; 
} 
.fixture-details .result { 
    float:left; 
    width:20%; 
    text-align:center; 
} 
.fixture-details .away-team { 
    float:left; 
    width:40%; 
    text-align:left; 
} 
.forecasts { 
    display:block; 
} 
.forecasts .player-forecast { 
    display:block; 
} 
.forecasts .player-forecast .player { 
    float:left; 
    width:40%; 
    text-align:left; 
} 
.forecasts .player-forecast .forecast { 
    float:left; 
    width:20%; 
    text-align:center; 
} 
.forecasts .player-forecast .score { 
    float:left; 
    width:40%; 
    text-align:right; 
} 
@media all and (min-width: 500px) { 
    .fixture { 
     vertical-align:bottom; 
     height:auto; 
     overflow:auto; 
     width:100%; 
    } 
    .fixture-date { 
     display:inline-block; 
     width:20%; 
     height:auto; 
     overflow:auto; 
    } 
    .fixture-details { 
     display:inline-block; 
     width:35%; 
    } 
    .forecasts { 
     display:inline-block; 
     width:45%; 
     height:auto; 
     overflow:auto; 
    } 
    .forecasts .player-forecast { 
     display:inline-block; 
     float:left; 
     width:33.33%; 
     line-height:auto; 
     overflow:auto; 
    } 
    .forecasts .player-forecast .player { 
     width:100%; 
     text-align:center; 
    } 
    .forecasts .player-forecast .forecast { 
     width:50%; 
    } 
    .forecasts .player-forecast .score { 
     width:50%; 
     text-align:center; 
    } 
    .fixture:not(:first-child) .player { 
     display:none; 
    } 
} 

Czy było to rozwiązanie, którego szukałeś?

Niektóre wyzwania/rzeczy-left-to-zrobić z tego rozwiązania:

• ustalające przestrzenie: można zauważyć, że istnieje jakiś puste miejsca między rzędami (pionowo), to może być ustalona z zastosowaniem display:inline-block, ale wtedy będziesz musiał zajmować się pustym miejscem w poziomie (jest kilka postów o tym, jak to naprawić na stackoverflow)
• Rozwiązanie jest specyficzne dla 3 graczy (zwróć uwagę na .forecasts .player-forecast { width:33.33%; }, to 33,33% powinno zostać zmienione na 100/liczba_playerów dla optymalnej wizualizacji).
• Będziesz musiał dostosować szerokości, aby odpowiadały Twoim potrzebom.

Answer 2

Proponuję, aby budować mądrzejsze tabele, nie używając znacznika, ale używając właściwości i klas wyświetlania css3. To mój sposób robienia responsywnych tabel.

<div class="table"> 
    <div class="tr"> 
     <div class="td"></div> 
     <div class="td"></div> 
    </div> 
</div> 

Amd CSS powinno być tak:

.table { display: table; } 
.tr { display: table-row; } 
.td { display: table-cell; } 

Więc w zasadzie od rozdzielczości chcesz tabela być „czuły” po prostu powiedzieć, że chcesz stole komórki (.td) być

.td {display: block; } 

i wszystko będzie idealnie dopasowane! Oto demo na żywo (ustaw rozdzielczość na wyższą i przekonaj się sam :) http://jsfiddle.net/Cowwando/2jkm108u/ Pozdrawiam!

Answer 3

To może nie być rozwiązanie, którego szukasz, ale jeśli nie masz nic przeciwko DIV zamiast TABLE, możesz spróbować użyć Flexbox. To może dać ci inspirację: Really Responsive Tables using Flexbox