@media screen and (min-width:640px){
 /* for PC*/

 table.reftble{width:600px;}
 table.reftble td{width:300px;}
 table.reftble td.midp{width:150px;}

 .col1{width:200px;background-color:#99ff99;}
 .col2{width:400px;background-color:#ffffff;}

}

@media screen and (max-width:640px){
/* for smart phone or Tablet device*/
 table.reftble{width:92vw; max-width:600px;}
 table.reftble td{width:46vw; max-width:300px;}
 table.reftble td.midp{width;23vw; max-width:150px;}

 .col1{width:30vw ;max-width:200px;background-color:#99ff99;}
 .col2{width:62vw ;max-width:400px;background-color:#ffffff;}
}

 .colu{
 vertical-align: middle;
 margin:10px;
 }