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 like this 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 have set up a fiddle with what I have achieved so far: http://jsfiddle.net/vwanr2gx/

I have not found a way to put all the "cells" for a fixture on the same row and keep the same width for the "cells" in the same "column". I cannot hard-code the width of the cells for teams as I don't know the content (user-generated).

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

How can I achieve that (if possible)?

Answer 1

I don't know if you found a solution for this question, but here is one that I developed. These are the details:

• Kept your HTML code (replaced some ul/li tags with div, but it probably will work with your lists just making small changes in the styles), and changed the CSS depending on the media width.
• If it's a "big display", then only the first row of player names will be displayed.
• float:left, float:left, float:left...

You can see a working example here: http://jsfiddle.net/yuL0pvgt/1/. And this is the CSS code that 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 that you were looking for?

Some challenges/things-left-to-do with this solution:

• Fixing the spaces: you may notice that there's some blank space between the rows (vertically), this can be fixed using display:inline-block, but then you'd have to deal with blank space horizontally (there are a few posts about how to fix it on stackoverflow)
• The solution is specific for 3 players (notice the .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 widths so they match your needs.