How to disable responsive tables feature in University Theme

Responsive WordPress theme suitable for Schools, Colleges or educational websites.
GK User
Sun Jun 14, 2015 12:53 pm
Hi,
I'm using some tables (<table><thead><tr>... ) in my website, but I've setup my own responsive styles.

It works fine, but I've noticed tags like this
Code: Select all
<span class="gk-table-label">header info here</span>

get inserted into the table cells when accessing it from a mobile.
Also br tags disappear (not only from mobiles).

Just wondering how can I disable that option. I understand it was created to allow responsive tables, but I'm using my own resposive styles for tables.

Here a url of my site: http://www.qsfc.com.au/dev/8s_competition/15-may-test/ please make sure you click on the tab Ladder to see an example of a table

Thanks in advance
User avatar
Senior Boarder

GK User
Mon Jun 15, 2015 9:25 am
Hello,

Please remove this fragment:
Code: Select all
// Responsive tables
        jQuery('article section table').each(function (i, table) {
            table = jQuery(table);
            var heads = table.find('thead th');
            var cells = table.find('tbody td');
            var heads_amount = heads.length;
            // if there are the thead cells
            if (heads_amount) {
                var cells_len = cells.length;
                for (var j = 0; j < cells_len; j++) {
                    var head_content = jQuery(heads.get(j % heads_amount)).text();
                    jQuery(cells.get(j)).html('<span class="gk-table-label">' + head_content + '</span>' + jQuery(cells.get(j)).html());
                }
            }
        });

from University/js/gk.scripts.js file.

and this one:
Code: Select all
/* 11.7. Responsive tables
==================================== */

@media (max-width: 600px) {
   article section table:not(.woocommerce) {
      border: 1px solid #eee;
      border-bottom: none;
      max-width: 100%!important;
      width: 100%!important;
   }

   article section table thead {
      display: none;
   }

   article section table:not(.woocommerce) td {
      border-top: 1px solid #eee;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      clear: both;
      display: block;
      float: right;
      padding: 5px 5px 5px 43%!important;
      position: relative;
      width: 100%;
   }

   article section table td:first-child {
      border-top: none;
   }

   article section table:not(.woocommerce) tbody tr {
      border-bottom: 2px solid #eee;
   }

   article section table td span.gk-table-label {
      display: block;
      font-size: 95%;
      font-weight: bold;
      left: 5px;
      position: absolute;
   }
}

from University/css/tablet.css file
User avatar
Moderator

GK User
Tue Jun 23, 2015 9:28 am
Thanks. Works perfectly :)
I had figured the css myself but couldn't find the js. All good now.
User avatar
Senior Boarder


cron