Question

我有一张响应表。在小型设备上，它是td，元素的样式是display:block。

但在这种情况下，表格的标题会反映在最顶层，而不是每个项目之前。如何制作它，以便在移动设备上我有表项目标题，表头项目的结构？

@media (max-width: 600px) {
            td, th {
                display: block;
                padding-left: 0 !important;
            }
        }

<table width="100%">
        <thead>
        <tr>
            <th><span>№</span></th>
            <th><span>Date</span></th>
            <th><span>Adress</span></th>
            <th><span>Price</span></th>
            <th><span>Status</span></th>
        </tr>
        </thead>
        <tbody>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        </tbody>
    </table>

Answer 1

将你的css改为

@media (max-width: 600px) {
            td, th {
                display: inline-block;
                padding-left: 15px !important;
            }
        }

摘录

<table width="100%">
        <thead>
        <tr>
            <th><span>№</span></th>
            <th><span>Date</span></th>
            <th><span>Adress</span></th>
            <th><span>Price</span></th>
            <th><span>Status</span></th>
        </tr>
        </thead>
        <tbody>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        <tr class="item">
            <td><span>1</span></td>
            <td><span>13.12.2017</span></td>
            <td><span>Street</span></td>
            <td>
                <b>
                    <span>299</span>
                </b>
            </td>
            <td>
                <span>Received</span>
                <span class="brackets">13.12.2017</span>
            </td>
        </tr>
        </tbody>
    </table>

nodeEntity

响应表移动，表头

1 个答案: