Responsive Table Record

Responsive Table Record

  
We are trying to display a Table Listing with records showing the first three details of the record.

Given this code:

@media screen and (max-width: 1023px) {
 .Responsive .Login_Info_Logout:before {
       color: #E7EFF4 ;
 }
         .Responsive .TableRecords td:nth-child(2).TableRecords_OddLine,
  .Responsive .TableRecords td:nth-child(2).TableRecords_EvenLine {
      display: block;
        }
 .Responsive .TableRecords td:nth-child(3).TableRecords_OddLine,
   .Responsive .TableRecords td:nth-child(3).TableRecords_EvenLine {
       display: block;
   } 
   }
        }


We are able to achieve this:



But the problem now is when you view the same screen on a tablet:



The right most columns have no details since the details have been moved to the left.

Regards,
Hi JC,

You can change the CSS rule above to be:
@media screen and (max-width: 764px) {
instead of
@media screen and (max-width: 1023px) {

So it only applies on smartphone form factors, and it will probabily work fine.

Cheers,
Tiago Simões
Hi Tiago,

Your suggestion did the job.

Thanks!