Styling Tables surrounding columns

Question

I'm trying to design a table so it ends up like the image. I need to surround the 2 last columns in something to get this effect. However I cannot find anything on Google or on Stack. Is this even possible with HTML/CSS? Or do I need to create an overlay with CSS and just position that over the 2 last columns?

<table class="promo-table">
  <th>Product</th>
  <th>Modellen</th>
  <th>Referentie</th>
  <th>TariefPrijs 2018</th>
  <th class="promo">Promoprijs</th>

  <tr class="first-promo">
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>

  <tr>
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>

  <tr>
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>

</table>

Answer 1

One approach is to simulate that box with setting the borders to the corresponding cells. The Headline can be created with a greater top border and the pseudo element ::before.

This approach works only, if you set border-collapse: collapse; on your table, otherwise there will be gaps between the borders of the cells.

The advantage is that the box size scales directly with the content of the table. If you create that box as an overlay, you will have a problem when the content of the table or the column widths change.

table {
  border-collapse: collapse;
}

th,
td {
  padding: 5px 10px;
  margin: 0;
}

table tr td:nth-child(4),
table tr th:nth-child(4) {
  border-left: 2px solid #17a4e4;
}

table tr td:nth-child(5),
table tr th:nth-child(5) {
  border-right: 2px solid #17a4e4;
}

table tr th {
  position: relative;
  border-top: 25px solid transparent;
}

table tr th:nth-child(4),
table tr th:nth-child(5) {
  border-top: 30px solid #17a4e4;
}

table tr:last-child td:nth-child(4),
table tr:last-child td:nth-child(5) {
  border-bottom: 2px solid #17a4e4;
}

table tr th:nth-child(4)::before {
  content: "Aanbieding";
  text-transform: uppercase;
  color: white;
  position: absolute;
  top: -23px;
  left: 50%;
}

<table class="promo-table">
  <tr>
    <th>Product</th>
    <th>Modellen</th>
    <th>Referentie</th>
    <th>TariefPrijs 2018</th>
    <th class="promo">Promoprijs</th>
  </tr>
  <tr class="first-promo">
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>
  <tr>
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>
  <tr>
    <td>Set remblokken, vooras</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75,81</td>
    <td class="promo">€38,70</td>
  </tr>
</table>