JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fossies.org/linux/www/bootstrap-3.3.7.tar.gz/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fossies.org/linux/www/bootstrap-3.3.7.tar.gz/bootstrap-3.3.7/dist/css/bootstrap.min.css">
<div class="table-responsive">
					<table class="table table-striped no-borders table-hover table-condensed" id="section-table">
						<thead>
							<tr>
								<th class="text-center headcol">Date</th>
								<th class="text-center">PV Power Import (kWh)</th>
								<th class="text-center">Grid Power Export (kWh)</th>
								<th class="text-center">kWh Charge (kWh)</th>
								<th class="text-center">Charge Capacity %</th>
								<th class="text-center">kWh Discharge (kWh)</th>
								<th class="text-center">Discharge Capacity %</th>
								<th class="text-center">Battery Round-Trip Efficiency %</th>
							</tr>
						</thead>	
            <tbody>
						<tr>
              <td class="text-center headcol">3/27/2017</td>
              <td class="text-center">400</td>
              <td class="text-center">200</td>
              <td class="text-center">900</td>
              <td class="text-center">100</td>
              <td class="text-center">700</td>
              <td class="text-center">50</td>
              <td class="text-center">60</td>
             </tr>
             <tr>
              <td class="text-center headcol">3/28/2017</td>
              <td class="text-center">600</td>
              <td class="text-center">500</td>
              <td class="text-center">800</td>
              <td class="text-center">150</td>
              <td class="text-center">850</td>
              <td class="text-center">80</td>
              <td class="text-center">70</td>
             </tr>
             <tr>
              <th class="text-center headcol">Average</th>
              <th class="text-center">500</th>
              <th class="text-center">350</th>
              <th class="text-center">850</th>
              <th...

CSS

/* TABLES */
.table-bordered {
  border: 1px solid #EBEBEB;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  background-color: #F5F5F6;
  border-bottom-width: 1px;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #e7e7e7;
}
.table > thead > tr > th {
  border-bottom: 1px solid #DDDDDD;
  vertical-align: bottom;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;  
  padding: 8px;
  vertical-align: top;
}
.table .headcol {
  position:absolute;
}