JSFiddle - React, Tailwind, and code Playground

HTML

<table class="items" width="100%" style="border-collapse: collapse;" cellpadding="6">
   <thead>
      <tr>
         <td width="5%">Pos.</td>
         <td width="59%">Ware</td>
         <td width="10%">Einheiten</td>
         <td width="14%">Einzelpreis</td>
         <td width="12%">Gesamtpreis</td>
      </tr>
   </thead>
   <tbody>
      <!-- ITEMS HERE -->
      <tr>
         <td align="center">1.</td>
         <td>Large pack Hoover bags</td>
         <td>2,00 Stck</td>
         <td class="cost">4,00 &euro;</td>
         <td class="cost">8,00 &euro;</td>
      </tr>
      <!-- END ITEMS HERE -->
      <tr>
         <td class="blanktotal" colspan="3" rowspan="3"></td>
         <td class="totals"><b>Zwischensumme:</b></td>
         <td class="totals cost"><b>XX,XX &euro;</b></td>
      </tr>
      <tr>
         <td class="totals">19 % MwSt.:</td>
         <td class="totals cost">XX,XX &euro;</td>
      </tr>
      <tr>
         <td class="totals"><b>Summe:</b></td>
         <td class="totals cost"><b>XX,XX &euro;</b></td>
      </tr>
   </tbody>
</table>

CSS

table.items {
	border: 0.1mm solid #000000;
}
td {
	vertical-align: top;
}
.items td {
	border-left: 0.1mm solid #000000;
	border-right: 0.1mm solid #000000;
}
table thead td {
	background-color: #EEEEEE;
	font-weight: bold;
	text-align: center;
	border: 0.1mm solid #000000;
}
.items td.blanktotal {
	background-color: #EEEEEE;
	border: 0.1mm solid #000000;
	background-color: #FFFFFF;
	border: 0mm none #000000;
	border-top: 0.1mm solid #000000;
	border-right: 0.1mm solid #000000;
}
.items td.totals {
	text-align: right;
	border: 0.1mm solid #000000;
}
.items td.cost {
	text-align: "." right;
}