Crashed display in mobile

Hi

Thanks for using my plugin. It seems that your table contain only two columns. If you do not want that that responsive please remove the responsive css code from the pearl_csv_to_webpage.css.

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

table, thead, tbody, th, td, tr {
display: block;
}

.pearl_tblstyle thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

.pearl_tblstyle tr td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

.pearl_tblstyle td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space:nowrap;
content : ”;
}

/*
Label the data
*/
.pearl_tblstyle td:before { content: attr(data-content);display: inline-block; }

}
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}

/* iPads (portrait and landscape) ———– */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}

Hope this help. if you have any further queries please leave a reply.

Thanks

Liz

I am pasting the responsive code here :

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	.pearl_tblstyle thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	.pearl_tblstyle tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.pearl_tblstyle td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space:nowrap;
                content : '';
	}
	
	/*
	Label the data
	*/
	.pearl_tblstyle td:before { content:  attr(data-content);display: inline-block; }
	
}
/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}