JSFiddle - React, Tailwind, and code Playground
by greenpeace
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<style>
#simple_table td, .theadright {
text-align: right;
border-top: 1px solid #BBB
}
#simple_table th {
background-color: #FFE19F;
border-top: 1px solid #BBB
}
#simple_table thead th {
border-bottom: none;
}
</style>
<div class="table-responsive">
<table id="simple_table" class="table table-sm" style="margin: 1em 0 0 0;">
<!-- <caption>Esto es el pie de tabla</caption> -->
<thead>
<tr>
<th scope="col">Mercantil</th>
<th scope="col", class="theadright">Kg entrada</th>
<th scope="col" class="theadright">Kg retirados</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">CESPA</th>
<td>4.912.000</td>
<td>4.998.270</td>
</tr>
<tr>
<th scope="row">PLASCAN</th>
<td>1.131.000</td>
<td>1.175.860</td>
</tr>
<tr>
<th scope="row">CLEAR PET</th>
<td>2.738.000</td>
<td>2.785.900</td>
</tr>
<tr>
<th scope="row">R GUEROLA</th>
<td>687.000</td>
<td>2.785.900</td>
</tr>
<tr>
<th scope="row">R FELMA</th>
<td>7.129.000</td>
<td>5.943.400</td>
</tr>
<tr>
<th scope="row">M CANO</th>
<td>293.120</td>
<td>309.340</td>
</tr>
<tr>
<th scope="row">TR2</th>
<td>1.601.000</td>
<td>3.129.640</td>
</tr>
<tr>
<th scope="row">SAICA</th>
<td>11.684.000</td>
<td>101.660</td>
</tr>
<tr>
...