html - CSS 响应表

Question

因为这个，我快疯了。我正在尝试仅使用 CSS 和 HTML 使表格在移动设备上响应。在 google 和 stackoverflow 上搜索了几个小时，仍然不知道如何解决这个问题。尝试了不同的方法，仍然没有。试过 div 表，正常。

好的，我正在尝试制作这张 table > http://postimg.org/image/62upgmozv/通过媒体查询将 480px 转换为 > http://postimg.org/image/5brtspn5x/

颜色和名字很重要。我只需要一个建议或想法如何解决这个问题。对我来说，主要问题是为 DATE(橙色)制作带有单独 div 的 div 表，然后针对移动设备对其进行排序(见第二张图片)，然后在下一个日期重复。<​​/p>

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"; }
}