Responsive table mobile, header of table

Question

I have got a responsive table. On small devices, it's td, th elements' styles are display:block .

But in this case, the header of the table is reflected at the very top, and not before every item. How to make it, so that on mobile devices I have got the structure of the table-item header, table header-item?

 @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

change you css to this

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

snippet down

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