I have been working with this table for some time now and i cannot figure out how to get the nested feature working correctly, when i try to insert the nested table into the original table is admitidly does go in but it removes all the formatting from my previous table and just screws up everything. is there a certian way i need to nest my html table inside the outertable? Maybe im just not setting up the classes right? Regardless i can get the nested table working sort of correctly but my outer table has features i want to keep, namely search, sort, pagination, etc.. But when i nest my table it removes all of this completely, how can i retain these features while nesting my tables? Also my nested table is a collpasable/expandable style table so its initailly hidden from the user until you click the row then the table expands, my current setup (ugly and not practical at all) has the nested table hidden and will show up when the row is clicked but the nested table appears outside the table at the bottom of the screen, i cant find any help and have gotten little to no progress made despite reading for days, any help you may be able to provide would be life saving!
Thats all the code for my table page i have, i am using bootstrap.css and bootstrap.js
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This link is for the formatting on the navigation bar at the top -->
<link rel="stylesheet" href="navbar.css">
<!-- These are the formatting links for the table -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css">
<!-- Scripts for the tables auto resizing, search, etc... -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/DT_bootstrap.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul class="clearfix">
<li class='active'><a href="/xampp/customertable/">Home</a></li>
<li>
<a href="">Profile<span class="arrow">▾</span></a>
<ul class="sub-menu">
<li><a href="/xampp/profile/">Update or Change</a></li>
<li><a href="#">Change Password</a></li>
</ul>
</li>
<li><a href='#'>Send Notice of Sale</a></li>
<li><a href='/xampp/deficiency/'>Exp of Deficiecy</a></li>
<li><a href='#'>Accounts</a></li>
<li>
<a href='#'>Reports<span class="arrow">▾</span></a>
<ul class="sub-menu">
<li><a href="/xampp/profile/">Dashboard</a></li>
<li><a href="#">Bad Debt Collection</a></li>
<li><a href="#">1099C</a></li>
<li><a href="#">Custom Reports</a></li>
</ul>
</li>
<li><a href=''>Ask an Expert</a></li>
<li><a href='#'>Cart $</span></span></a></li>
<form action="/xampp/customertable/">
<li class="buttons">
<input id="log_out" type="submit" name="log_out" value=" Log Out "/>
</li>
</form>
</ul>
</div>
</body>
<div class="col-lg-6">
<div class="row-fluid">
<div class="container">
<form method="post" action="##########.php" >
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" id="newtable">
<br>
<thead>
<tr>
<th><center>Details</center></th>
<th>Status</th>
<th>Name</th>
<th>Last 6 VIN#</th>
<th>Account</th>
<th>Repo Sale Date</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($con, "SELECT * FROM users")or die(mysqli_error($con));
$rownumber = 0;
while($row=mysqli_fetch_array($query)){
$rownumber++;
$id=$row['id'];
?> <!-- This is for declaring each table entry individually so the table will open and close for each row -->
<tr data-toggle="collapse" data-target="#row<?php echo $rownumber;?>">
<td width="5%"><center>
<a class="btn accordion-toggle">▼</a>
</center></td>
<td><?php echo @$row['status'] ?></td>
<td><?php echo @$row['username'] ?></td>
<td><?php echo @$row['last_6_vin'] ?></td>
<td><?php echo @$row['account'] ?></td>
<td><?php echo @$row['repo_sale_date'] ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- This is the nested table that the user sees when they click the plus or the table entry -->
<?php
for($u = 0; $u <= $rownumber; $u++) {
?>
<div class="accordian-toggle collapse" id="row<?php echo $u?>">
<table class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>Select Document To View</th>
<th>Secret Key</th>
<th>Status </th>
<th>Created</th>
<th> Expires</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="btn btn-info">Notice of Sale</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
<tr>
<td><a href="#" class="btn btn-info">Certified Receipt</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
<tr>
<td><a href="#" class="btn btn-info">Explanation of Deficiency</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
<tr>
<td><a href="#" class="btn btn-info">Vehicle Condition Report</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
<tr>
<td><a href="#" class="btn btn-info">GPS Tracking History</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
<tr>
<td><a href="#" class="btn btn-info">1099c - Debt Forgiveness</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
</tr>
</tbody>
</table>
<div align="right">
<a href="#" class="btn btn-success">Redeemed</a>
<a href="#" class="btn btn-danger">Bankruptcy</a>
</div>
</div>
<?php } ?>
</div> <!-- This is the ending div for class "container" -->
</div> <!-- This is the ending div for class "row-fluid" -->
</div> <!-- This is the ending div for class "col-lg-6" -->
Thank you for the time and help.