html - 使用 CSS 的响应式表格

Question

我有一个简单的表格，如果在桌面分辨率下查看，它将显示为普通的 html 数据表格。但对于移动设备，我希望显示有点不同。 HTML代码:

<table>
    <tr>
        <th>Booking Time</th>
        <th>Pax</th>
        <th>Name</th>
        <th>Mobile</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>07:30PM</td>
        <td>3</td>
        <td>Kevin</td>
        <td>0104321248</td>
        <td>advoworks@hotmail.com</td>
    </tr>
    <tr>
        <td>08:30PM</td>
        <td>4</td>
        <td>John</td>
        <td>01241234123</td>
        <td>greatone@hotmail.com</td>
    </tr>

</table>

桌面将正常显示表格标题和数据行。

表格的移动版本应隐藏表格标题，并以 3 行格式显示数据，例如:

Time, Pax
Name, Phone number
Email

基本上，移动版每行表格数据将有 3 个“行”，并隐藏原始表格标题。

我现在拥有的 CSS 是隐藏表格标题，但我被困在将列重新排列成行的位置。

@media only screen and (max-width: 760px)  {

th {
    display: none;
}
}

有人能指出我正确的方向吗？

Answer 1

尝试给所有东西一个类并以这种方式控制它们。

FIDDLE

HTML

<table>
    <thead>
        <tr>
            <th class="cell-time">Booking Time</th>
            <th class="cell-pax">Pax</th>
            <th class="cell-name">Name</th>
            <th class="cell-mobile">Mobile</th>
            <th class="cell-email">Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="cell-time">07:30PM</td>
            <td class="cell-pax">3</td>
            <td class="cell-name">Kevin</td>
            <td class="cell-mobile">0104321248</td>
            <td class="cell-email">advoworks@hotmail.com</td>
        </tr>
        <tr>
            <td class="cell-time">08:30PM</td>
            <td class="cell-pax">4</td>
            <td class="cell-name">John</td>
            <td class="cell-mobile">01241234123</td>
            <td class="cell-email">greatone@hotmail.com</td>
        </tr>
    </tbody>
</table>

CSS

@media only screen and (max-width: 760px)  {
    thead {
        display: none;
    }
    table {
        border-collapse: collapse;
    }
    table, tbody, tr, td {
        display: block;
        width: 100%;
    }
    tr {
        overflow: hidden;
    }
    td {
        padding: 0;
    }
    td.cell-time, td.cell-pax,
    td.cell-name, td.cell-mobile {
        float: left;
        width: 50%;
    }
}