Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive table plugin
Tagged: Responsive Table, table
- This topic has 5 replies, 2 voices, and was last updated 7 years, 4 months ago by louisagung.
-
AuthorPosts
-
October 25, 2016 at 8:53 pm #195328louisagungMember
Hi,
I maintain a site at htttp://strong-indonesia.com and I need tables to display various product specifications. Such product page can be seen at http://strong-indonesia.com/bar-cutter-strong/
Here's the thing. The table is not responsive when displayed in a mobile phone. It doesn't scroll horizontally as well so people can only see the first 2 or 3 rows. I've tried using Magic Liquidizer and Automatic Responsive Tables plugin but they didn't work on my site. I need plugin or method that can all tables responsive at once instead of re-coding all the tables on the site.
Any suggestions?
Thank you
http://strong-indonesia.com/bar-cutter-strong/October 26, 2016 at 10:14 am #195351Victor FontModeratorjQuery DataTables: https://datatables.net/
It's not a WordPress plugin per se, and you need to know how to code to use it. It works great and provides extremely valuable features. I use it on several sites I built for the US Federal Government. Unfortunately, they are behind tight security and I can't show you how they work.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 26, 2016 at 4:20 pm #195373louisagungMemberI see. I'll take a look, Victor. Thank you!
October 31, 2016 at 8:22 pm #195581louisagungMemberHi Victor, where should I put the HTML for the DataTables? I'm using Genesis Executive Pro Theme. Should I put it in Genesis parent theme or in the Executive child theme? What is the best theme file to put it in?
November 1, 2016 at 10:56 pm #195627louisagungMemberHi,
I just implemented the local installation as written in https://datatables.net/manual/installation. I put the DataTables HTML inclusion in my Executive Pro's Landing Page Template (page_landing.php) file, before the run Genesis loop. Nothing happened. I guess I missed something.
I uploaded the DataTables folder directly under public_html but I don't see any datatables.css or datatables.js in the DataTables folder. The Responsive folder is there in the extensions folder though.
Maybe someone has a step by step instruction?
November 9, 2016 at 8:50 am #195946louisagungMemberFound the solution here: http://sitesforprofit.com/responsive-tables-in-wordpress
I put this code in the child theme's CSS:@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; } }
and this code in the Footer Scripts section in Theme Settings:
<script> 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); } } 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>
Works neatly!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.