Responsive "table"
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)?
I don't know if you found a solution for this question, but here is one that I developed. These are the details:
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. 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:
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) .forecasts .player-forecast { width:33.33%; } , this 33.33% should be changed to 100 / number_of_players for optimal visualization). I would suggest you to build smarter tables, not using the tag, but using css3 display properties and classes. Thats my way of doing responsive tables.
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
Amd your css should be like this:
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
So basically on the resolution you want your table to be 'responsive' you just say that you want your table-cells ( .td ) to be
.td {display: block; }
and you will have everything aligned perfectly! Here is live demo (set resolution to higher and see for yourself:) http://jsfiddle.net/Cowwando/2jkm108u/ Regards!
This may not be the solution you're looking for, but if you don't mind DIVs instead of TABLE, you could try and use flexbox. This could give you some inspiration: Really Responsive Tables using Flexbox
链接地址: http://www.djcxy.com/p/94530.html上一篇: 实体框架：删除列后出现无效列
下一篇: 响应式“表格”