SethCalkins
6/19/2017 - 8:31 PM
Nested table solution
Nested table solution
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
*, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; }
html { width: 100%; height: 100%; background: lighten(pink, 5%);}
.container {
width:1080px;
margin:20px auto;
background-color:#fefefe;
color: #222;
padding:20px;
border-radius: 4px;
box-shadow: 0 0 6px #666666;
> table {
border:2px solid #222;
border-radius: 3px;
}
}
@table-bg: #F1C8EF;
table {
border-spacing:0;
border-collapse:collapse;
width:100%;
text-align:center;
line-height:150%;
th, .expand {
color: #666666;
padding:10px;
background-color:@table-bg;
}
th,td {
width:150px!important;
}
.expand {
cursor:pointer;
width:20px!important;
}
table {
display:none;
}
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
$(function(){
$('.header-level').click(function(){
$(this).next('.sub-level').find('table').toggle();
});
});Nested table solution
A nested table that appears on clicking the related row.
The top level rows contain, say, an order. The nested table that relates to this will contain a detailed breakdown of what is included in the order. Related rows are wrapped in seperate tbodys in the hope that this will be kosher for screen readers/accessibility.
A Pen by Seth Calkins on CodePen.
<div class="container">
<table class="accordion-table">
<thead>
<tr>
<th class="expand"></th>
<th>Package No.</th>
<th>Weight (lbs)</th>
<th>Dimensions (in)</th>
<th>Value (USD)</th>
<th>Total Cost (USD)</th>
<th>Special Services (USD)</th>
</tr>
</thead>
<tbody>
<tr class="header-level">
<td class="expand">+</td>
<td>1</td>
<td>12</td>
<td>10 x 10 x 10</td>
<td>200.00</td>
<td>35.00</td>
<td>4.00</td>
</tr>
<tr class="sub-level">
<td class="expand"></td>
<td colspan="6">
<table>
<thead>
<th>Part Number</th>
<th>Description</th>
<th>Order Number</th>
<th>Qty Shipped</th>
<th>Weight</th>
<th>Total Value (USD)</th>
</thead>
<tbody>
<tr>
<td>657338</td>
<td>Lorem ipsugyuig hjgjhgfjhg sdkjhfdsjhf kjdshf jdkhfjkhfjk hkjh jk hdjkh kjh jkh jkhm</td>
<td>6383000</td>
<td>14</td>
<td>45</td>
<td>4.00</td>
</tr>
<tr>
<td>657339</td>
<td>Lorem ipsum</td>
<td>6383011</td>
<td>4</td>
<td>56</td>
<td>49.00</td>
</tr>
<tr>
<td>657340</td>
<td>Lorem ipsum</td>
<td>6383022</td>
<td>18</td>
<td>32</td>
<td>487.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr class="header-level">
<td class="expand">+</td>
<td>2</td>
<td>12</td>
<td>10 x 10 x 10</td>
<td>200.00</td>
<td>35.00</td>
<td>4.00</td>
</tr>
<tr class="sub-level">
<td class="expand"></td>
<td colspan="6">
<table>
<thead>
<th>Part Number</th>
<th>Description</th>
<th>Order Number</th>
<th>Qty Shipped</th>
<th>Weight</th>
<th>Total Value (USD)</th>
</thead>
<tbody>
<tr>
<td>657338</td>
<td>Lorem ipsum</td>
<td>6383000</td>
<td>14</td>
<td>45</td>
<td>4.00</td>
</tr>
<tr>
<td>657339</td>
<td>Lorem ipsum</td>
<td>6383011</td>
<td>4</td>
<td>56</td>
<td>49.00</td>
</tr>
<tr>
<td>657340</td>
<td>Lorem ipsum</td>
<td>6383022</td>
<td>18</td>
<td>32</td>
<td>487.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr class="header-level">
<td class="expand">+</td>
<td>2</td>
<td>12</td>
<td>10 x 10 x 10</td>
<td>200.00</td>
<td>35.00</td>
<td>4.00</td>
</tr>
<tr class="sub-level">
<td class="expand"></td>
<td colspan="6">
<table>
<thead>
<th>Part Number</th>
<th>Description</th>
<th>Order Number</th>
<th>Qty Shipped</th>
<th>Weight</th>
<th>Total Value (USD)</th>
</thead>
<tbody>
<tr>
<td>657338</td>
<td>Lorem ipsum</td>
<td>6383000</td>
<td>14</td>
<td>45</td>
<td>4.00</td>
</tr>
<tr>
<td>657339</td>
<td>Lorem ipsum</td>
<td>6383011</td>
<td>4</td>
<td>56</td>
<td>49.00</td>
</tr>
<tr>
<td>657340</td>
<td>Lorem ipsum</td>
<td>6383022</td>
<td>18</td>
<td>32</td>
<td>487.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>