Hey,
Ive got a table which shows the packages available on my website. I Can currently only show three because then it has filled the width of the page. What i want to do is make it so when an arrow is pressed it makes the rows move to the according way either going back one package or going forwards one package.
The code im using at the moment is:
HTML Code:
<table class="pricing-table">
<thead>
<tr>
<td style="width: 250px;" class="colfirst"><h3>The<br>Plans<br>Feauters:</h3></td>
<td style="width: 150px;"><h3>Begginer</h3><br><span class="price">$25</span></td>
<td style="width: 150px;"><h3>Advanced</h3><br><span class="price">$50</span></td>
<td style="width: 150px;" class="collast"><h3>Premium</h3><br><span class="price">$100</span></td>
</tr>
</thead>
<tbody>
<tr>
<td class="colfirst"><span>Storage space</span></td>
<td>1000 MB</td>
<td>2000 MB</td>
<td class="collast">5000 MB</td>
</tr>
<tr>
<td class="colfirst"><span>Brandwith</span></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Unlimited views</span></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Sharing</span></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>HD enabled</span></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Time tracking</span></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Unlimited views</span></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Sharing</span></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>HD enabled</span></td>
<td><img alt="" src="./images/mini-icons/yes.png" class="icon"></td>
<td><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
<td class="collast"><img alt="" src="./images/mini-icons/no.png" class="icon"></td>
</tr>
<tr>
<td class="colfirst"><span>Buy now</span></td>
<td><a href="#" class="big-btn red aligncenter">Order Now !</a></td>
<td><a href="#" class="big-btn green aligncenter">Order Now !</a></td>
<td class="collast"><a href="#" class="big-btn blue aligncenter">Order Now !</a></td>
</tr>
</tbody>
</table>
I want each column to move accordingly when you press the arrows at top(there not in code at the moment) Anyone help me with this?
Thanks Again. |
