ixtensa/zixresponsivetables

Smartphone optimized responsive tables for Contao using jQuery and css.

README

!!! IMPORTANT NOTICE !!!, _(*1)

• Version: Extension include scripts only for Contao >3.2, <=3.5

What is this repository for?

• The Responsive Tables jQuery plugin for stacking tables on small screens. The purpose of responsiveTable.js is to give you an easy way of converting wide tables to a format that will work better on small screens.
• Version: 1.0.0

How do I get set up?

1. Copy folder to /system/modules/.

2. Add the class responsiveTable on your table or on division arround the table, script check only the main column from Contao. for example:, _(*2)

   <div class="responsiveTable">
       <!-- or use on table tag the class responsiveTables but not on both of them -->
       <table>
           <tr>
               <td>Titel 1</td>
               <td>Titel 2</td>
               <td>Titel 3</td>
           </tr>
           <tr>
               <td>foo</td>
               <td>goo</td>
               <td>hoo</td>
           </tr>
           <tr>
               <td>foo</td>
               <td>goo</td>
               <td>hoo</td>
           </tr>
       </table>
   </div>

3. If it exist a this will be added on all elements in , if not, script will take the element in first and use this as

   How it's work?

   The extension check, in main column a table and the class responsiveTables exist., _(*4)

   If it's exist will take the or first and add this on all elements as attribute 'data-th' (happen autoticaly).

   The attribute 'data-th' will added as :before selector on the same element.

   There is a css included for the standart representation. You find it in the system/modules/zixResponsiveTables/assets/css/responsiveTables.scss and you can custumize or overwrite it., _(*7)

   Who do I talk to?

   • Hakan Havutcuoglu
   • info@havutcuoglu.com
   , _(*6)
   , _(*5)
   , _(*3)