Table Responsible - iTable - v1.0

Developed by Wallace Rio


Download files

itables.css
itables.js


Cross-Browser

Tested on Firefox 45 / IE 8 / Opera 12 / Chrome 38 / Safari 5



Using

Insert script tag and link tag into your head document html

	<link  rel="stylesheet" href="itables.css">
	<script type="text/javascript" src="itables.js"></script>



Table vertical

Insert on your tag TABLE the class itable:

	<table class="itable vertical selecting full">	
		<tr >
			<th style="width:20%">Fulano</th>
			<td >30</td>			
		</tr>
		<tr>
			<th style="width:20%" >Fulano 2</th>
			<td>25</td>			
		</tr>
		<tr>
			<th style="width:20%">Fulano 3</th>
			<td>15</td>			
		</tr>
		<tr>
			<th style="width:20%">Fulano 4</th>
			<td>40</td>			
		</tr>
		
	</table>
Fulano 30
Fulano 2 25
Fulano 3 15
Fulano 4 40




Table horizontal

Insert on your tag TABLE the class itable:

	<table class="itable horizontal selecting full">
		<tr  >
			<th style="width:20%" >Name</th>
			<th  >Age</th>			
					
		</tr>	
		<tr>
			<td style="width:20%" >Fulano</td>
			<td>30</td>			
		</tr>
		<tr>
			<td style="width:20%">Fulano 1</td>
			<td>25</td>			
		</tr>
		<tr>
			<td style="width:20%">Fulano 3</td>
			<td>15</td>			
		</tr>
		<tr>
			<td style="width:20%">Fulano 4</td>
			<td>40</td>			
		</tr>		
	</table>
Name Age
Fulano 30
Fulano 1 25
Fulano 3 15
Fulano 4 40

Action

		<script type="text/javascript">
			itable.click('id_of_table',function(element){
				alert(element.innerHTML);
			});
		</script>
	



OBS:

Attributes to class use:

selecting: for mode select with hover and active
full: width 100%