<table class="charts-css bar multiple show-heading show-labels">
  <caption> 2016 Summer Olympics Medal Table </caption>
  <thead>
    <tr>
      <th scope="col"> Country </th>
      <th scope="col"> Gold </th>
      <th scope="col"> Silver </th>
      <th scope="col"> Bronze </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"> USA </th>
      <td style="--color: gold; --size: calc(46/100)"> 46 </td>
      <td style="--color: silver; --size: calc(37/100)"> 37 </td>
      <td style="--color: peru; --size: calc(38/100)"> 38 </td>
    </tr>
    <tr>
      <th scope="row"> GBR </th>
      <td style="--color: gold; --size: calc(27/100)"> 27 </td>
      <td style="--color: silver; --size: calc(23/100)"> 23 </td>
      <td style="--color: peru; --size: calc(17/100)"> 17 </td>
    </tr>
    <tr>
      <th scope="row"> CHN </th>
      <td style="--color: gold; --size: calc(26/100)"> 26 </td>
      <td style="--color: silver; --size: calc(18/100)"> 18 </td>
      <td style="--color: peru; --size: calc(26/100)"> 26 </td>
    </tr>
  </tbody>
</table>

table.bar {
  height: 200px;
  max-width: 300px;
  margin: 0 auto;
}