響應表移動，表頭

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>