JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr.js"></script>
<table summary="prix des fruits en euros">
  <caption>Prix des fruits</caption>
    <tr>
        <th>Kiwi</th>
        <td>13337€</td>
    </tr>
    <tr>
        <th>Banane flambée</th>
        <td>42€</td>
    </tr>
    <tr>
        <th>Citron</th>
        <td>1€</td>
    </tr>
</table>

CSS

body {
  font-size: 150%;
  background: #bada55;
}
table {
  width: 60%;
  border-collapse: separate;
    background: beige;
}
th, td {
  padding: .2em;white-space:nowrap;}


/*Styles perso*/
table{
  margin: 50px auto;
  /* changer la couleur ici*/
  background: deepskyblue;
}
tr{
  display: table;
  table-layout: auto;  
  width: 100%;
}
th{
  width: 1px;
}
td{
  display: table;
  width: 100%;
}
td:before{
  content: '';
  display: table-cell;
  width: 100%;
    background:red;
  border-bottom: 2px dotted black;
  /*pas mieux pour eviter le padding :) */
  
}