JSFiddle - React, Tailwind, and code Playground
by tomik23
HTML
<div style='height:150px;'>
</div>
<div class="table-responsive tableFixHead" style="max-height: 250px;"><table class="table table-striped table-bordered"><thead><tr><th scope="col" class="text-center">CANASTA</th><th scope="col" class="text-center">ABC1</th><th scope="col" class="text-center">C2</th><th scope="col" class="text-center">C3</th><th scope="col" class="text-center">D</th><th scope="col" class="text-center">E</th><th class="text-center" scope="col"> SUMATORIA DE GASTOS </th></tr></thead><tbody><tr><th scope="row">Accesorios Femeninos</th><td class="text-right">167.891.052</td><td class="text-right">63.676.617</td><td class="text-right">7.863.332</td><td class="text-right">1.919.889</td><td class="text-right">136.746</td><td class="text-right">241.487.636</td></tr><tr><th scope="row">Accesorios para Teléfonos Móviles</th><td class="text-right">12.559.433</td><td class="text-right">7.924.468</td><td class="text-right">705.797</td><td class="text-right">294.318</td><td class="text-right">27.775</td><td class="text-right">21.511.791</td></tr><tr><th scope="row">Cafetería</th><td class="text-right">213.879.398</td><td class="text-right">95.682.747</td><td class="text-right">12.476.490</td><td class="text-right">2.710.422</td><td class="text-right">113.029</td><td class="text-right">324.862.086</td></tr><tr><th scope="row">Calzado Deportivo</th><td class="text-right">100.872.393</td><td class="text-right">102.914.082</td><td class="text-right">22.830.118</td><td class="text-right">5.024.668</td><td class="text-right">481.272</td><td class="text-right">232.122.533</td></tr><tr><th scope="row">Calzado Femenino</th><td class="text-right">107.582.893</td><td class="text-right">59.604.740</td><td class="text-right">13.829.866</td><td class="text-right">3.220.996</td><td class="text-right">175.017</td><td class="text-right">184.413.512</td></tr><tr><th scope="row">Calzado General</th><td class="text-right">342.172.923</td><td...CSS
.tableFixHead { overflow-y: auto; height: 100px; border: 1px solid grey; }
.tableFixHead thead th { position: sticky; top: 0;padding:5px;border: 5px solid grey; }
.tableFixHead th { background: white; height: 8px; padding:5px }
.tableFixHead tr { height: 10px; padding:5px }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
.tableFixHead thead { background-color: gray}