percent Space

by khemikal

HTML

<table class="table-style" id="rackPlan1">
  <thead>
    <tr class="nukeMe">
      <th>Category Group</th>
      <th>Category</th>
      <th>Fineline</th>
      <th>Supplier</th>
      <th>CC</th>
      <th>SC</th>
      <th>Set Strategy</th>
      <th>Store Ct</th>
      <th>Landed Cost</th>
      <th>FF%</th>
      <th>Cost W/FF</th>
      <th>Retail $</th>
      <th>MU %</th>
      <th>In Str Wk</th>
      <th>Start Wk</th>
      <th>End Wk</th>
      <th>MD Wk</th>
      <th>Fixture</th>
      <th>Brand</th>
      <th>Proto A</th>
      <th>Proto B</th>
      <th>Proto C</th>
      <th>Proto D</th>
      <th>Proto E</th>
      <th>Proto F</th>
      <th>Proto G</th>
      <th>Proto H</th>
      <th>Proto I</th>
      <th>Proto J</th>
      <th>Proto K</th>
      <th>Proto L</th>
      <th>Proto M</th>
      <th>Proto N</th>
      <th>Proto O</th>
      <th>Proto P</th>
      <th>Proto Q</th>
      <th>Proto R</th>
      <th>Proto S</th>
      <th>Fixture Points</th>
    </tr>
  </thead>
  <tbody>
    <tr class="nukeMe" style="display: none;">
      <td class="catGrp">SEASONAL</td>
      <td class="category">HEAD AND HAND (D23)</td>
      <td class="parent1">1712 AC Hats</td>
      <td></td>
      <td>0</td>
      <td>1</td>
      <td>10-30</td>
      <td class="storeCt">673</td>
      <td>$0.00</td>
      <td>0.00%</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>0.00%</td>
      <td>201651</td>
      <td>201701</td>
      <td>201725</td>
      <td>201726</td>
      <td>4WAY</td>
      <td></td>
      <td class="protoA">1.00</td>
      <td class="protoB">0.00</td>
      <td class="protoC">1.00</td>
      <td class="protoD">1.00</td>
      <td class="protoE">1.00</td>
      <td class="protoF">1.00</td>
      <td class="protoG">1.00</td>
      <td class="protoH">1.00</td>
      <td class="protoI">1.00</td>
      <td class="protoJ">1.00</td>
      <td class="protoK">1.00</td>
      <td class="protoL">1.00</td>
      <td class="protoM">1.00</td>
      <td...

CSS

body {
  height: 100%;
}

body {
  font: 12px/1 Montserrat, sans-serif;
  color: #333;
}

.wrapper {
  display: flex;
  min-height: 100%;
}

.sidebar {
  position: absolute;
  width: 12%;
}

.content {
  flex: 1;
  background: #eee;
  box-shadow: 0 0 5px #000;
  transform: translate3d(0, 0, 0);
  transition: transform .3s;
  overflow: hidden;
  padding: 30px;
}

#ContentHolder {
  padding-top: 1px;
  clear: both;
  width: 88%;
  /*max-height: 800px;*/
  overflow-x: auto;
  overflow-y: auto;
}

.content.isOpen {
  transform: translate3d(12%, 0, 0);
}

.button-xpand:before {
  content: '\f0c9';
  font: 42px fontawesome;
}

.button-left:before {
  content: '\f0a8';
  font: 30px fontawesome;
}

.button-right:before {
  content: '\f0a9';
  font: 30px fontawesome;
}

.title {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: #eee;
  border-bottom: 1px solid #222;
  background: #2a2a2a;
}

.title a {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: #eee;
  border-bottom: 1px solid #222;
  background: #2a2a2a;
}

.nav li a {
  position: relative;
  display: block;
  font-size: 12px;
  color: #eee;
  border-bottom: 1px solid #222;
  padding: 15px 15px 15px 50px;
}

.nav li a:before {
  font: 14px fontawesome;
  position: absolute;
  top: 14px;
  left: 20px;
}

.nav li:nth-child(1) a:before {
  content: '\f207';
}

.nav li:nth-child(2) a:before {
  content: '\f126';
}

.nav li a.active {
  box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
  background: #444;
}

h1 {
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 8px;
}

h2 {
  font-size: 18px;
  font-weight: 400;
  color: #999;
}

h5 {
  padding-top: 7px;
  font-weight: 400;
  color: #999;
}

.table-style {
  background: #FFF;
  border-radius: 3px;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s...

JavaScript

$(function stuff() {
  $('#rackPlan1 > tbody > .categorySub').each(function() {
    var x = $(this).find('td:nth-child(2)').text();
    x = x.replace('TOTAL', '%SPACE')
      //console.log(x);
    $('#rackPlan0 tr:last').after('<tr class="pctSpace"><td>' + x + '</td></tr>');
  })
  var el1 = $('#rackPlan0 > thead > tr > th:gt(1)');
  var a = el1.length + 1;
  //console.log(el1.length);
  for (i = 0; i < a; i++) {
    $('#rackPlan0 .pctSpace').append('<td></td>');
  }
})