JSFiddle - React, Tailwind, and code Playground

by Leona

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table class="table dailySummaryTable">
    <colgroup span="2" class="borderAround"></colgroup>
    <colgroup span="5" class="borderAround"></colgroup>
  <thead>
    <tr>
      <th class="textLeft">Type</th>
      <th>Ave/Max</th>
      <th class="bottomBorder">Wed 04/11/15</th>     
      <th class="bottomBorder">Thu 05/11/15</th>
      <th class="bottomBorder">Fri 06/11/15</th>
      <th class="bottomBorder">Sat 07/11/15</th>
      <th class="bottomBorder">Sun 08/11/15</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" class="textLeft">value 1</th>
      <td class="noBottomBorder">Ave</td>
      <td colspan="2" class="notData noBorder">
        <span class="blankValuesText">Values in table above</span>
      </td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
     </tr>
    <tr>
      <td class="noTopBorder">Max</td>
      <td colspan="2" class="notData noBorder"></td>
      <td class="noBorder bottomBorder attribute">1&#160;</td>
      <td class="noBorder bottomBorder attribute">1&#160;</td>
      <td class="noBorder bottomBorder attribute">1&#160;</td>
    </tr>
    <tr>
      <th rowspan="2" class="textLeft">value 2</th>
      <td class="noBottomBorder">Min</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
    </tr>
    <tr>
      <td class="noTopBorder">Max</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      <td class="noBorder attribute">1&#160;</td>
      </tr>
  </tbody>
</table>

CSS

table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0px;
}

.dailySummaryTable td{
    padding-left: 0px !important;
    text-align: center!important;
}
/*.dailySummaryTable .borderAround {
    border: 1px double #080808 !important;
}*/
.dailySummaryTable tr:nth-child(4n),
.dailySummaryTable tr:nth-child(4n+3)  {
    background-color: #F9F9F9;
}
.dailySummaryTable .table>thead>tr>th{
    border: 1px solid #EFEFEF;
}
/*.dailySummaryTable .table {
    border: 1px solid #EFEFEF;
}*/
.dailySummaryTable th {
    padding:0 5px 0 2px;
    font-weight: normal;
    vertical-align: middle;
    text-align: center!important;
}
.dailySummaryTable .table > tbody > tr > td {
    padding-left: 0px !important;
    text-align: center!important;
}
.dailySummaryTable td.borderTop {
    border-top: 1px solid #EFEFEF;
    border-bottom: 0px;
    border-left:0px;
    border-right:0px;
}
.dailySummaryTable th.border{
    border: 1px solid #EFEFEF;
}
.dailySummaryTable th.noBorder {
    border: 0px!important;
}
.dailySummaryTable td.noBorder {
    border: 0px!important;
}
.dailySummaryTable td {
    border: 1px solid #EFEFEF;
}
.dailySummaryTable td.bottomBorder {
    border-bottom: 1px solid #EFEFEF !important;
}
.dailySummaryTable th.bottomBorder {
    border-bottom: 1px solid #808080 !important;
}
.dailySummaryTable td.bottomBorder {
    border-bottom: 1px solid #EFEFEF !important;
}
.dailySummaryTable th.bottomBorder {
    border-bottom: 1px solid #808080 !important;
}
.dailySummaryTable td.noBottomBorder {
    border-bottom: 0px!important;
}
.dailySummaryTable td.noTopBorder {
    border-top: 0px!important;
}
.dailySummaryTable td.notData {
    background-color: #E8E8E8;
}
.blankValuesText {
    position: relative;
    top: 7px;
    font-size: 13px;
}
.textLeft{
    text-align:left;
}
colgroup.borderAround  {
    border: 1px double #080808;
}