Responsive "table"

Question

I have an HTML table that is too wide for small screens. I am trying to get rid of this table and use lists and divs to have a more responsive design.

Here is my HTML I came up with:

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

I want it to look like this on small screens:

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

and so on on wide screens:

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

I installed a script with what I have achieved so far: http://jsfiddle.net/vwanr2gx/

I did not find a way to put all the “cells” for attachment in the same row and keep the same width for the “cells” in the same “column”. I can’t hardcode the cell width for commands, because I don’t know the content (user generated).

I tried to use css tables, but since I have nested divs, it automatically creates new rows (see fiddle).

How can I achieve this (if possible)?

Answer 1

I do not know if you have found a solution for this issue, but here is the one that I developed. These are the details:

• Held your HTML code (replaced the ul / li tags with a div , but it will probably work with your lists just by making small changes to the styles) and change the CSS depending on the width of the media.
• If it is a "large display", only the first line of player names will be displayed.
• float:left , float:left , float:left ...

Here you can see a working example: http://jsfiddle.net/yuL0pvgt/1/ . And this is the CSS code I used:

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

Was this the type of solution you were looking for?

Some problems / things remaining valid with this solution:

• Correction of spaces: you may notice that there is a space between the lines (vertically), this can be fixed with display:inline-block , but then you will have to deal with empty space horizontally (there are several messages about how to fix it in stackoverflow)
• The solution is intended for 3 players (pay attention to .forecasts .player-forecast { width:33.33%; } , this 33.33% should be changed to 100 / number_of_players for optimal visualization).
• You will need to adjust the width to fit your needs.

Answer 2

I would suggest you build smarter tables, not using a tag, but using css3 properties and display classes. This is my way of making flexible tables.

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

Amd, your css should look like this:

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

So basically by permission you want your table to be responsive, you just say you want your table tables (.td) to be

 .td {display: block; } 

and you will have everything that will be perfect! Here is a live demo (set the resolution above and see for yourself) http://jsfiddle.net/Cowwando/2jkm108u/ Hello!

Answer 3

This may not be the solution you're looking for, but if you don't mind DIVs instead of TABLE, you can try and use flexbox. It may give you some inspiration: Truly responsive tables with Flexbox