响应表移动，表头

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

摘录下来

 @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>