Fancy css table design with overlaying colors

Question

I got the following table design from a designer and was asked to implement it in html/css.

I tried around and got to the following implementation, but now I am stuck and feel I was running in the wrong direction.

My approach was to add empty columns/rows to separate between the vertical boxes and the areas that don't have the overlay boxes. Some problems I am now facing:

1. The vertical boxes should start a bit higher then the colored rows of the table and end a bit further down.
2. I am supposed to draw the lines on the right side that extend then on top to the left.
3. On firefox the rounded corners behave strange in combination with the overlay box (see on the right). In chrome the rounded corners look like expected.

I tried to get the code out of my scripts. It is a bit tricky since I generate the table using R (don't ask ;)).

::after,
 ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
  background: #eee;
}

::selection {
  background: #eee;
}

element {}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1.4;
  color: #222222;
  font-family: MaisonNeue;
  font-size: 14px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

html {
  font-size: 10px;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
}

.vanilla {
  font-size: 12px;
  width: 90%;
  border-collapse: collapse;
  text-align: center;
  border-spacing: 0 5px;
  background-size: 100% 50%;
}

.vanilla th {
  text-align: center;
  background: #ffffff;
  color: #000000;
}

.vanilla td {
  padding: 5px 0;
  border-bottom: 5px solid white;
}

.vanilla tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.vanilla tr:first-child td:first-child {
  border-top-left-radius: 10px;
  text-align: left;
  padding-left: 7px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:first-child td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(2) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(2) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(3) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(3) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(4) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(4) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(5) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(5) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla tr:nth-child(6) td:first-child {
  text-align: left;
  padding-left: 7px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vanilla tr:nth-child(6) td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vanilla td:nth-child(3),
td:nth-child(5),
td:nth-child(7),
td:nth-child(9) {
  background: rgba(236, 236, 236, 0.95);
  text-align: center;
  padding-left: 7px;
  width: 180px;
  color: black;
}

.vanilla td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  padding-left: 10px;
}

.vanilla tr:first-child {
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  color: #ffffff;
  background-color: RGB(181, 194, 198);
}

.vanilla tr:nth-child(2) {
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  color: white;
  background-color: RGB(65, 143, 126);
}

.vanilla tr:nth-child(3) {
  background-color: RGB(146, 206, 193);
  color: white;
  font-weight: bold;
  font-style: Times new roman;
  font-size: 17px;
}

.vanilla tr:nth-child(4) {
  background-color: RGB(15, 74, 96);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.vanilla tr:nth-child(5) {
  background-color: RGB(74, 123, 143);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.vanilla tr:nth-child(6) {
  background-color: RGB(56, 56, 54);
  color: white;
  font-weight: bold;
  font-style: arial;
  font-size: 17px;
  padding-left: 10px;
}

.delta_value {
  /*width: 30px;*/
  display: inline-block;
}

.delta {
  font-weight: bold;
  font-size: 17px;
  width: 25px;
  color: #69A252;
  height: 25px;
  border-radius: 15px;
  vertical-align: middle;
  /*padding-top: 5px;*/
  margin-left: 4px;
  /*padding-left: 8px;*/
}

.delta_base {
  text-align: left;
  color: #000000;
}

<div>
  <div id="tacos_1_1-taco" class="shiny-html-output shiny-bound-output">
    <table class="vanilla">
      <thead>
        <tr>
          <th><span> </span></th>
          <th><span></span></th>
          <th><span>2015</span></th>
          <th><span></span></th>
          <th><span>2016</span></th>
          <th><span></span></th>
          <th><span>2017</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span>XXX</span></td>
          <td><span></span></td>
          <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
  </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
</span>
</td>
<td><span></span></td>
<td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXXX</span><span style="width:60px;float:right;margin-right:3px;color:black" class="delta">(0%)</span></div>
  </span>
</td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">0 XXX</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(0%)</span></div>
    </span>
  </td>
</tr>
<tr>
  <td><span>XXXX</span></td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">  0 %</span><span style="width:60px;float:right;margin-right:3px;color:white" class="delta"></span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">   0 %</span><span style="width:60px;float:right;margin-right:3px;color:green" class="delta">(+0%)</span></div>
    </span>
  </td>
  <td><span></span></td>
  <td><span><div style="position:relative"><span style="position:absolute;right:40%" class="delta_value">   0 %</span><span style="width:60px;float:right;margin-right:3px;color:red" class="delta">(0%)</span></div>
    </span>
  </td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

Your table design indeed is tricky, but I think I managed to get it working.

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <td></td>
      <td>2018</td>
      <td>2017</td>
      <td>2016</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
  </tbody>
  <!-- each "group" of rows is its own tbody -->
  <tbody class="blue">
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
    <tr>
      <th>XXX</th>
      <td>0 XXX <span class="details">(+50)</span></td>
      <td>0 XXX </td>
      <td>0 XXX </td>
    </tr>
  </tbody>
</table>

And here you have the CSS (i wrote SCSS in the code pen, this is the compiled result)

table thead th, table thead td {
  padding: 5px 10px;
  font-weight: bold;
}
table tbody td, table tbody th {
  color: #fff;
  position: relative;
  padding: 10px 25px;
}
table tbody td:before, table tbody th:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
  background: green;
  z-index: -2;
}
table tbody.blue th:before, table tbody.blue td:before {
  background: blue;
}
table tbody td {
  color: #000;
}
table tbody td:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0px;
  background: rgba(200, 200, 200, 0.9);
  z-index: -1;
}
table tbody th:before {
  border-radius: 5px 0 0 5px;
  left: 5px;
}
table tbody td:last-child:before {
  border-radius: 0 5px 5px 0;
}
table tbody th:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  bottom: 0;
  border-left: 1px solid red;
}
table tbody tr:first-child th:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  border-top: 1px solid red;
}
table tbody tr:last-child th:after {
  bottom: 5px;
}

.details {
  color: green;
}

And here is the code pen: https://codepen.io/anon/pen/dQmymP

(Please ignore the appearance, I did not have time to style it with proper colors, spacing and font)

I checked it in Chrome, Firefox and Edge. Let me know it this works for you.