JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<div class="container cl ContactUs"> 
   <div class="con-left"> 
      <h3>Contact Us</h3> 
      <p class="desktop">INLAND REVENUE DEPARTMENT<br/> SIR CHITTAMPALAM A GARDINER MAWATHA,<br/> COLOMBO 02.​ </p> 
	  <p class="mobile">INLAND REVENUE DEPARTMENT<br/> SIR CHITTAMPALAM A GARDINER MAWATHA, COLOMBO 02.​ </p> 
      <p>GENERAL  NUMBER: - 011&#160;213 5135 
         <br/> FAX: - 	011 233 7777 
         <br/> Commissioner General </p> 
      <table class="in-table desktop"> 
         <thead> 
            <tr>
               <th width="20%">	Name	</th> 
               <th width="25%">	Designation	</th> 
               <th width="15%">	Office	</th> 
               <th width="15%">	Fax	</th> 
               <th width="25%">	EMail	</th>
            </tr> 
         </thead> 
         <tbody> 
            <tr>
               <td>	Mrs.K.Dahanayake	</td>
               <td>	Commissioner General of Inland Revenue	</td>
               <td>	011&#160;213&#160;5400 011 233 4400 011 213 5420	</td>
               <td>011&#160;233&#160;7777	</td>
               <td>	[email protected] 
                  <br/>[email protected]	</td>
            </tr> 
            <tr>
               <td>	Mr.K.A.G.Abhayaratne	</td>
               <td>	Deputy Commissioner General (Tax Surveillance, Zonal Tax Administration (R/O)	</td>
               <td>011&#160;213&#160;5401	</td>
               <td>011 233 8569	</td>
               <td>	[email protected]	</td>
            </tr> 
            <tr>
               <td>	Mrs.W.Anulawathie	</td>
               <td>	Deputy Commissioner General (Tax Payer Services )	</td>
               <td>011&#160;213 5403	</td>
               <td>011&#160;233&#160;6644	</td>
               <td>	[email protected]	</td>
            </tr> 
            <tr>
               <td>	Mr.D.M.L.I.Dissanayake	</td>
               <td>	Deputy Commissioner General (HR and HR Development)	</td>
               <td>011&#160;213 5405	</td>
               <td>011 233&#160;8524	</td>
  ...

CSS

td{border:1px solid black;}

/*-->Contact Us*/
.container.cl .desktop{
	display:none;
}

.container.cl .in-table.mobile{
	display:block;
}

.in-table.mobile .cuRow .cuField {
	font-weight:bold;
	font-size:12px;
}

.in-table.mobile .cuRow .cuValue {
	margin-left:10px;
}

.in-table.mobile .cuRow:nth-child(n+3):nth-child(-n+4) .cuValue{
	width:87px;
}

/*<--Contact Us*/

JavaScript

$(document).ready(function(){
	var $tblMobile = $('.ContactUs table.in-table.mobile');
	var $tblDesktop = $('.ContactUs table.in-table.desktop');
	var strTemplate = $('.ContactUs table.in-table.mobile td').html();
	
	var $items =$('<div/>');
	
	$('.ContactUs table.in-table.desktop th').each(function(){
		var $temp = $(strTemplate);
		$temp.find('.cuField').text($(this).text());
		$items.append($temp);
	});
    
    var mobileHtml = '';
    
    $('.ContactUs table.in-table.desktop tbody tr').each(function(){
		var $row = $items;
        console.log($row.html())
		$(this).find('td').each(function(index){
            console.log($(this).text().trim());
			$row.find('.cuRow:nth-child('+ (index + 1) +') .cuValue').text($(this).text().trim());
		});
		mobileHtml +='<tr><td>'+ $row.html() +'</td></tr>';
	});

	console.log(mobileHtml);
	$tblMobile.find('tbody').html(mobileHtml);
});