CSS响应表

Question

因为这件事我不在乎。我正在尝试仅使用CSS和HTML使表格在移动设备上响应。搜索谷歌和stackoverflow几个小时仍然不知道如何抓住这个问题。尝试了不同的方法，但仍然没有。试过div表和正常。

好吧，好吧，我正在尝试制作这张桌子＆gt; http://postimg.org/image/62upgmozv/通过媒体查询480px转换为此＆gt; 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"; }
}