<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <table class="table table-striped table-bordered subprojects"> <thead> <tr> <th> </th> <th>Project Title</th> <th>Project-Type</th> <th>Start</th> <th>End</th> <th>Status</th> </tr> </thead> <tbody> <tr data-id="8" title="Process 8"> <td class="text-center"> <i class="glyphicon glyphicon-star"></i> </td> <td>Tea Time</td> <td>Third Party Founded</td> <td>13.10.2014</td> <td>17.10.2014</td> <td> <i class="glyphicon glyphicon-refresh right-5"></i> Running </td> </tr> <tr> <td colspan="6"> <table class="table table-striped table-bordered nomargin"> <tbody> <tr data-id="5" title="Process 5"> <td class="text-center"> <i class="glyphicon glyphicon-chevron-right"></i> </td> <td>Process Title</td> <td>Third Party Founded</td> <td>20.10.2009</td> <td>20.10.2010</td> <td> <i class="glyphicon glyphicon-time right-5"></i> planned </td> </tr> <tr data-id="7" title="Process 7"> <td class="text-center"> <i class="glyphicon glyphicon-chevron-down"></i> </td> <td>make some Coffee</td> <td>Internal</td> <td>10.10.2014</td> <td>31.12.2014</td> <td> <i class="glyphicon glyphicon-time"></i> Planned </td> </tr> <tr> <td colspan="6"> <table class="table table-striped table-bordered nomargin"> <tbody> <tr data-id="3" title="Process 3" class="current"> <td class="text-center"> <i class="glyphicon glyphicon-chevron-right"></i> </td> <td>pay all the debts</td> <td>Internal</td> <td>-</td> <td>-</td> <td> <i class="glyphicon glyphicon-time"></i> Planned </td> </tr> <tr data-id="4" title="Process 4" class=""> <td class="text-center"> <i class="glyphicon glyphicon-chevron-down"></i> </td> <td>sail away, dream your dream</td> <td>Internal</td> <td>01.02.2014</td> <td>01.06.2014</td> <td> <i class="glyphicon glyphicon-ok"></i> Finished </td> </tr> <tr> <td colspan="6"> <table class="table table-striped table-bordered nomargin"> <tbody> <tr data-id="10" title="Process 10"> <td class="text-center"> <i class="glyphicon glyphicon-chevron-down"></i> </td> <td>visit Java</td> <td>External</td> <td>27.10.2014</td> <td>31.10.2014</td> <td> <i class="glyphicon glyphicon-time"></i> Planned </td> </tr> <tr> <td colspan="6"> <table class="table table-striped table-bordered nomargin"> <tbody> <tr data-id="2" title="Process 2"> <td class="text-center"> <i class="glyphicon glyphicon-chevron-right"></i> </td> <td>clean up my room</td> <td>Third Party Founded</td> <td>01.09.2011</td> <td>01.12.2015</td> <td> <i class="glyphicon glyphicon-refresh"></i> Running </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

.subprojects td[colspan] { padding: 10px 20px 20px; } .subprojects td[colspan] table{ border-left: 5px solid #3071A9; border-bottom-left-radius: 5px; } .subprojects td[colspan] table td[colspan] table{ border-color: #449D44; } .subprojects td[colspan] table td[colspan] table td[colspan] table{ border-color: #EC971F; } .subprojects td[colspan] table td[colspan] table td[colspan] table td[colspan] table{ border-color: #777; } .subprojects tr:hover > td:not([colspan]){ background-color: #AED3E5; cursor:pointer; } .subprojects tbody tr.current td{ background-color: #D9EDF7; } .subprojects tr > td:first-child:not([colspan]) { width: 45px; } .subprojects i.glyphicon-refresh{ animation: drehen 4s linear infinite; } @keyframes drehen{ 100% { transform: rotate(360deg); } }

$(function(){ $('.subprojects tr td:not([colspan])').on('click', function (e) { location.href = '/project/show/' + $(this).parent().data('id'); }); });