ixtensa/zixresponsivetables

Smartphone optimized responsive tables for Contao using jQuery and css.

1.0.2 2015-07-31 11:49 UTC

This package is auto-updated.

Last update: 2024-10-19 10:16:47 UTC


README

!!! IMPORTANT NOTICE !!!

  • 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:

    <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.

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.

Who do I talk to?

  • Hakan Havutcuoglu
  • info@havutcuoglu.com