响应式“表”

我有一个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，它会自动创建新的行（请参阅小提琴）。

我该如何做到这一点（如果可能的话）？

来源

2014-09-01 Damien Chaib

我不知道你是否找到了这个问题的解决方案，但这里是我开发的一个解决方案。以下是详细信息：

保存在您的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以获得最佳可视化）。
您需要调整宽度以符合您的需求。

来源

2014-09-02 21:25:34

它确实有帮助，特别是与标题。你的解决方案的问题是你在很多“单元格”上设置了宽度，这不是我想要做的（我不知道玩家的数量和队名的长度）。但是，我知道其他细胞的内容，所以我可以从中解决问题。在发布这个问题后，使用你的想法和我发现的内容，我想出了一个可能的解决方案：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

我建议你建立更智能的表，不使用标签，但使用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/ 关心！

来源

2014-09-01 15:19:40 Cowwando

不幸的是，我已经尝试过这一点，它不工作，因为我想。我需要一些rowspan作为“fixture-date”行，因为文本可能比“team-home”单元更长，我不希望它抵消一切。 – 2014-09-01 15:35:46

这可能不是您正在寻找的解决方案，但如果您不介意DIV而不是TABLE，则可以尝试使用flexbox。这可能会给你一些灵感：Really Responsive Tables using Flexbox

来源

2016-02-16 11:59:46 user3392439

是否可以使用flexbox制作可扩展表格？ – PirateApp 2017-07-28 13:09:42

响应式“表”

回答

相关问题