JSFiddle - React, Tailwind, and code Playground
by olgamarishem
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<style>
#simple_table td {
text-align: right;
}
.colcenter{
text-align: right;
}
.negrita{
font-weight: 800;
}
.titulo p{
font-family: "Work Sans", sans-serif;
font-weight: 700;
text-align: center;
margin: 0;
margin-top:20px;
}
</style>
<div class="titulo" style="position: relative; height:auto; width:100%">
<p>
Situación de la ganadería en España y su evolución en los últimos seis años
</p>
</div>
<div class="table-responsive">
<table id="simple_table" class="table table-striped table-sm" style="margin: 2em 0 2em 0;">
<caption>Fuente: Encuestas ganaderas (MAPA), Estadísticas de producción ecológica (MAPA) y SITRAN para el censo de aves. *Variación en el periodo 2016-2021. Elaboración propia.
</caption>
<thead>
<tr class="table-warning">
<th scope="col"></th>
<th class="colcenter" scope="col">Bovino</th>
<th class="colcenter" scope="col">Ovino</th>
<th class="colcenter" scope="col">Caprino</th>
<th class="colcenter" scope="col">Porcino</th>
<th class="colcenter" scope="col">Aves</th>
<th class="colcenter" scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Censo ganadero en 2020</th>
<td>6,6 millones</td>
<td>15,4 millones</td>
<td>2,7 millones</td>
<td>32,8 millones</td>
<td>502,9 millones</td>
<td class="negrita">560 millones</td>
</tr>
<tr>
<th scope="row">Cabezas de ganado eq. en Unidades de Ganado Mayor (UGM)</th>
<td>4 millones</td>
<td>1,6 millones</td>
<td>278.359,3</td>
<td>8,5...