CSS響應表

Question

因爲這一點，我要離開我的腦海了。我正在嘗試使用僅CSS和HTML在移動設備上響應表格。搜索谷歌和stackoverflow幾個小時，仍然不知道如何抓住這個問題。嘗試了不同的方法，仍然沒有。嘗試div表和正常。

確定在這裏不言而喻，我試圖讓這個表>http://postimg.org/image/62upgmozv/通過媒體查詢480像素轉換成以下>http://postimg.org/image/5brtspn5x/

顏色和名稱是非常重要的。我只需要一個建議或想法如何解決這個問題。主要問題是使用DATE（橙色）單獨的div製作div表格，然後將其分類爲移動版本（請參閱第二張圖片），然後重複下一個日期。

Answer 1

你可以看一下我做了這樣一個例子：http://www.f1time.com/mobile/

我沒有從你的表中的代碼，所以我想我會分享一個我做了該功能。

@media only screen and (max-width: 500px) { 
/* Force table to not be like tables anymore */ 
table, thead, tbody, th, td, tr { 
    display: block; 
} 

/* Hide table headers (but not display: none;, for accessibility) */ 
thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

tr { border: 1px solid #ccc; } 

td { 
    /* Behave like a "row" */ 
    border: none; 
    position: relative; 
    padding-left: 50%; 
} 

td:before { 
    /* Now like a table header */ 
    position: absolute; 
    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap; 
} 


/* 
Label the data 
*/ 
td:nth-of-type(1):before { content: "Current Position"; } 
td:nth-of-type(2):before { content: "Position Change"; } 
td:nth-of-type(3):before { content: "Manager"; } 
td:nth-of-type(4):before { content: "Lap"; } 
td:nth-of-type(5):before { content: "Gap"; } 
td:nth-of-type(6):before { content: "Gap to Front"; } 
td:nth-of-type(7):before { content: "Lap Time"; } 
td:nth-of-type(8):before { content: "Fastest"; } 
td:nth-of-type(9):before { content: "Pits"; } 
td:nth-of-type(10):before { content: "Status"; } 
}