響應式「表」

我有一個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

響應式「表」

回答

相關問題