响应式“表格”
我有一个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，它会自动创建新行（请参阅小提琴）。
我怎样才能做到这一点（如果可能的话）？
我不知道你是否找到了这个问题的解决方案，但这是我开发的一个解决方案。 这些是细节：
div替换一些ul / li标签，但它可能会与你的列表一起工作，只是对样式进行小的修改），并根据媒体宽度更改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来修复，但是您必须水平处理空白空间（有几篇关于如何处理空白空间的文章修复它在stackoverflow） .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>
你的CSS应该是这样的：
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
所以基本上你希望你的表是'响应'的决议，你只是说你想让你的表格单元格（.td）是
.td {display: block; }
你将拥有完美的一切！ 这里是现场演示（设置更高的分辨率，并为自己看:) http://jsfiddle.net/Cowwando/2jkm108u/问候！
这可能不是您正在寻找的解决方案，但如果您不介意DIV而不是TABLE，则可以尝试使用Flexbox。 这可以给你一些启发：使用Flexbox的真正响应式表格
链接地址: http://www.djcxy.com/p/94529.html上一篇: Responsive "table"