JSFiddle - React, Tailwind, and code Playground

by lamarant

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800italic,800,300italic,300"></script>
<div class="trial-table-wrapper">
  <table>
    <tbody>
      <tr>
        <th class="col-compound" rowspan="2"><span>Compound</span></th>
        <th class="col-indication" rowspan="2">Indication</th>
        <th colspan="3" class="col-phase-header">Phase</th>
        <th class="col-phase">Phase I</th>
        <th class="col-phase">Phase II</th>
        <th class="col-phase">Phase III</th>
        <th class="col-clin-trial" rowspan="2">Clinical Trials</th>
      </tr>
      <tr class="mobile-phase">
        <th class="col-phase">I</th>
        <th class="col-phase">II</th>
        <th class="col-phase">III</th>        
      </tr>
    </tbody>
    <tbody data-barcolor="#81BD41" data-background="#D6E2C9">
      <tr class="trial" data-percent="83.333333333333" data-image="http://axovantv2.poinko.com/wp-content/uploads/2016/01/axovant-mindset-logo-small.png">
        <td class="col-compound" rowspan="2" style="background: rgb(129, 189, 65);"><span>RVT-101</span></td>
        <td class="col-indication" style="background: rgb(214, 226, 201);">Alzheimer's Disease
          <p>Currently in Phase III <span>- <a href="https://clinicaltrials.gov/ct2/show/NCT02585934?term=rvt-101&amp;rank=1" target="_blank">View Link</a></span></p>
        </td>
        <td class="col-phase" style="background: rgb(214, 226, 201);"></td>
        <td class="col-phase" style="background: rgb(214, 226, 201);"></td>
        <td class="col-phase" style="background: rgb(214, 226, 201);"></td>
        <td class="col-clin-trial" style="background: rgb(214, 226, 201);"><a href="https://clinicaltrials.gov/ct2/show/NCT02585934?term=rvt-101&amp;rank=1" target="_blank">View Link</a></td>
      </tr>
      <tr class="trial" data-percent="66.666666666667" data-image="">
        <td...

CSS

body {
  font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
}
.trial-table-wrapper {
  position: relative;
  margin-bottom: 1em;
}

.trial-table-wrapper a {
  text-decoration: none;
}

.trial-table-wrapper ul,
.trial-table-wrapper ol {
  margin: 0 0 0 1em;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.trial-table-wrapper sup {
  font-size: 50%;
}

.trial-table-wrapper li {
  line-height: 1.25em;
}

.trial-table-wrapper table {
  background: #fff;
  font-size: 16px;
  border-spacing: 2px;
  border-collapse: separate;
  width: 100%;
  margin-bottom: 1em;
  border: none !important;
}

.trial-table-wrapper table th {
  background-color: #535353;
  color: #fff !important;
  padding: 5px 10px;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}

/* hide phase header for desktop */
.trial-table-wrapper th.col-phase-header,
.trial-table-wrapper tr.mobile-phase { display : none; }

/* set column widths */
.trial-table-wrapper .col-compound {
  width: 16%;
}

.trial-table-wrapper .col-indication {
  width: 29%;
}

.trial-table-wrapper .col-phase {
  width: 12%;
  white-space: nowrap;
}

.trial-table-wrapper .col-clin-trial {
  width: 19%;
}

.trial-table-wrapper table tr.trial {
  height: 100px;
}

.trial-table-wrapper table td {
  padding: 5px;
  color: #535353;
}

.trial-table-wrapper table td.col-indication {
  padding: 20px 10px;
}
.trial-table-wrapper table td.col-indication p {
  display: none;
  font-size: 13px;
  font-style: italic;
}

.trial-table-wrapper table td.col-compound {
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.trial-table-wrapper table td.col-clin-trial {
  text-align: center;
  font-weight: bold;
}

.trial-table-wrapper tfoot {
  font-size: 14px;
  padding:0;
}

.trial-table-wrapper tfoot td {
  border: none !important;
  padding: 0 !important;
  line-height: 1.25em;
}

.trial-table-wrapper .phase-bar {
  position: absolute;
 ...

JavaScript

function addBars() {
  $('.phase-bar').remove();
  $('.trial-table-wrapper tbody').each(function() {
    var $tbody = $(this);
    var barColor = $tbody.data('barcolor');
    var bgColor = $tbody.data('background');

    $('td', $tbody).css({
      'background': bgColor
    });
    $('td.col-compound', $tbody).css({
      'background': barColor
    });

    $('tr.trial', $tbody).each(function() {
      //get top and left position of first phase of each row
      var $tr = $(this);
      var img = $tr.data('image');
      var totalPhaseWidth = 0;
      var phaseHeight = $('.col-phase:first', $tr).outerHeight();
      var pos = $('.col-phase:first', $tr).position();
      $('.col-phase', $tr).each(function() {
        totalPhaseWidth += $(this).outerWidth();
      });

      //adjust height and position to provide padding
      phaseHeight = phaseHeight - 30;
      pos.top = pos.top + 15;

      //add the bar
      var percentComplete = $tr.data('percent') / 100;
      pxToAdd = 0;
      if (percentComplete < .34) {
        pxToAdd = 0;
      } else if (percentComplete < .67) {
        pxToAdd = 2;
      } else {
        pxToAdd = 4;
      }
      var $phaseBar = $('<div />').addClass('phase-bar').css({
        'background': barColor,
        'height': phaseHeight + 'px',
        'width': totalPhaseWidth * percentComplete + pxToAdd + 'px',
        'top': pos.top + 'px',
        'left': pos.left + 'px'
      });

      //add the image
      if (img) {
        $img = $('<img />').attr('src', img);
        $phaseBar.append($img);
      }
      $tbody.closest('.trial-table-wrapper').append($phaseBar);
    });
  });
}

addBars();
$(window).resize(function() {
  addBars();
})