响应式“表”
我有一个HTML表格,对于小屏幕来说太宽了。我试图摆脱这张表,并使用列表和div来有更快的响应设计。响应式“表”
这是我的HTML,我想出了:
<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>
我希望它看起来像这样的小屏幕上:
----------------------------------------------------
| 01/09/2014 |
|----------------------------------------------------|
| Team A | Result | Team B |
|----------------------------------------------------|
| Player 1 | Forecast | 3.0 |
|----------------------------------------------------|
| Player 2 | Forecast | 0.0 |
像这样的宽屏幕:
| 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 |
我已经设置了我到目前为止取得的成果:http://jsfiddle.net/vwanr2gx/
我还没有找到一种方法来将一个灯具的所有“单元”放在同一行上,并将“单元”的宽度保持在同一个“列”中。我不能硬编码团队的单元格宽度,因为我不知道内容(用户生成的)。
我试图使用CSS表,但由于我有嵌套的div,它会自动创建新的行(请参阅小提琴)。
我该如何做到这一点(如果可能的话)?
我不知道你是否找到了这个问题的解决方案,但这里是我开发的一个解决方案。以下是详细信息:
- 保存在您的HTML代码(更换一些
ul
/li
标签与div
,但它可能会与你的名单只是让在款式变化小的工作),并且改变依赖于介质的CSS宽度。 - 如果是“大显示屏”,则只显示第一行玩家名称。
-
float:left
,float:left
,float:left
...
这里你可以看到一个工作示例:http://jsfiddle.net/yuL0pvgt/1/。这是我使用的CSS代码:
* {
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;
}
}
这是您寻找的解决方案的类型?
一些挑战/事情 - 左 - 待办事项与此解决方案:
- 固定的空间:您可能会注意到有行(垂直),这可以固定使用
display:inline-block
之间的一些空白,但是接下来你必须水平处理空白空间(有几篇关于如何修复它在计算器上的帖子) - 该解决方案特定于3名玩家(请注意
.forecasts .player-forecast { width:33.33%; }
,这33.33%应该更改为100/number_of_players以获得最佳可视化)。 - 您需要调整宽度以符合您的需求。
我建议你建立更智能的表,不使用标签,但使用css3显示属性和类。这是我做响应表的方式。
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
的AMD你的CSS应该是这样的:
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
所以基本上你想你的表是“回应”你刚才说,你希望你的表细胞(.td)分辨率
.td {display: block; }
你将拥有完美的一切! 这里是现场演示(设置更高的分辨率,看看你自己:) http://jsfiddle.net/Cowwando/2jkm108u/ 关心!
不幸的是,我已经尝试过这一点,它不工作,因为我想。我需要一些rowspan作为“fixture-date”行,因为文本可能比“team-home”单元更长,我不希望它抵消一切。 – 2014-09-01 15:35:46
这可能不是您正在寻找的解决方案,但如果您不介意DIV而不是TABLE,则可以尝试使用flexbox。这可能会给你一些灵感:Really Responsive Tables using Flexbox
是否可以使用flexbox制作可扩展表格? – PirateApp 2017-07-28 13:09:42
它确实有帮助,特别是与标题。你的解决方案的问题是你在很多“单元格”上设置了宽度,这不是我想要做的(我不知道玩家的数量和队名的长度)。但是,我知道其他细胞的内容,所以我可以从中解决问题。在发布这个问题后,使用你的想法和我发现的内容,我想出了一个可能的解决方案:http://jsfiddle.net/dchaib/vwanr2gx/2/。它仍然需要comestic的工作,但我认为这是我想要的行为。 – 2014-09-03 11:41:13
我用百分比来表示它是通用的。您可以直接使用某些列的值,并使用calc()来计算其他列的宽度,以使其看起来更清晰(正如您在jsfiddle中所做的一样,尽管数字看起来不正确)。 – 2014-09-03 12:19:27
关于不知道玩家人数,现在我想不出一种设置适合所有玩家数量的标准宽度的方式,并占据100%的宽度。这似乎是你一直都有的问题。如果您希望所有播放器列具有相同的宽度,则可能需要在生成表格(当时您会知道)时调整它,或者在生成表格后通过JavaScript/jQuery进行调整。 – 2014-09-03 12:24:47