How to make responsive the tables

Discussion forum for MOD Writers regarding MOD Development.
Locked
fifahub
Registered User
Posts: 150
Joined: Mon Oct 29, 2012 12:05 pm

How to make responsive the tables

Post by fifahub » Wed Jun 18, 2014 7:50 pm

Hi, I want to make responsive the phpbb tables.
I found this guide:
http://elvery.net/demo/responsive-tables/

If I want to add one of these snippets to make responsive the tables, what can I do? Thanks in advance for the help.

fifahub
Registered User
Posts: 150
Joined: Mon Oct 29, 2012 12:05 pm

Re: How to make responsive the tables

Post by fifahub » Sat Jun 21, 2014 8:38 am

I found this solution:

responsive-tables.js

Code: Select all

$(document).ready(function() {
  var switched = false;
  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };
   
  $(window).load(updateTables);
  $(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
  $(window).on("resize", updateTables);
   
	
	function splitTable(original)
	{
		original.wrap("<div class='table-wrapper' />");
		
		var copy = original.clone();
		copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
		copy.removeClass("responsive");
		
		original.closest(".table-wrapper").append(copy);
		copy.wrap("<div class='pinned' />");
		original.wrap("<div class='scrollable' />");

    setCellHeights(original, copy);
	}
	
	function unsplitTable(original) {
    original.closest(".table-wrapper").find(".pinned").remove();
    original.unwrap();
    original.unwrap();
	}

  function setCellHeights(original, copy) {
    var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        heights = [];

    tr.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

    tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });
  }

});
responsive-tables.css

Code: Select all

/* Foundation v2.1.4 http://foundation.zurb.com */
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }

/* Mobile */
@media only screen and (max-width: 767px) {
	
	table.responsive { margin-bottom: 0; }
	
	.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
	.pinned table { border-right: none; border-left: none; width: 100%; }
	.pinned table th, .pinned table td { white-space: nowrap; }
	.pinned td:last-child { border-bottom: 0; }
	
	div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
	div.table-wrapper div.scrollable { margin-left: 35%; }
	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
	
	table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
	table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
	
	
}
It works great but the first column of the table is fixed. How can I make it like the other columns? Thanks in advance for the help.

Locked

Return to “[3.0.x] MOD Writers Discussion”