How to make TablePress Table Responsive?

wordpressplugins
tablepress

(Rahul Sethi) #1

Just add Custom CSS & Javascript"

Add below CSS in Stylesheet file or body:

@media screen and (max-width: 600px) {
    table {width:100%;}
    thead {display: none;}
    tr:nth-of-type(2n) {background-color: inherit;}
    tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
    tbody td {display: block;  text-align:center;}
    tbody td:before { 
        content: attr(data-th); 
        display: block;
        text-align:center;  
    }

Follow the same process for JS, Paste this code -

<script>
(function () {
	var headertext = [];
	var headers = document.querySelectorAll("thead");
	var tablebody = document.querySelectorAll("tbody");
	
	for(var i = 0; i < headers.length; i++) {
		headertext[i]=[];
		for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
		  var current = headrow;
		  headertext[i].push(current.textContent.replace(/\r?\n|\r/,""));
		  }
	} 
	
	if (headers.length > 0) {
		for (var h = 0, tbody; tbody = tablebody[h]; h++) {
			for (var i = 0, row; row = tbody.rows[i]; i++) {
			  for (var j = 0, col; col = row.cells[j]; j++) {
			    col.setAttribute("data-th", headertext[h][j]);
			  } 
			}
		}
	}
} ());
</script>
  1. Now clear cache, done !

(Rishabh Sharma) #2

Thanks a lot bro! ************