Nested table solution

index.html

<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>

nested-table-solution.markdown

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.

License.

script.js

$(function(){
  $('.header-level').click(function(){
    $(this).next('.sub-level').find('table').toggle();
  });
});

scripts

<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>

style.less

*, *: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;
  }
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />