JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TEST DATA</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="table-responsive">
<!-- <div class="table"> -->
<table class="table table-striped table-bordered" id="testdata">
<thead>
<tr>
<th class="col-sm-1">Category1</th>
<th class="col-sm-2">Category2</th>
<th class="col-sm-1">Category3</th>
<th class="col-sm-1">Category4</th>
<th class="col-sm-1">Category5</th>
<th class="col-sm-1">Category6</th>
<th class="col-sm-1">Category7</th>
<th class="col-sm-2">Category8</th>
<th class="col-sm-2">Category9</th>
<th class="col-sm-1">Category10</th>
<th class="col-sm-1">Category100</th>
<th class="col-sm-1">Category1000</th>
<th class="col-sm-1">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="col-sm-1">Category1</th>
<th class="col-sm-2">Category2</th>
<th class="col-sm-1">Category3</th>
<th class="col-sm-1">Category4</th>
<th class="col-sm-1">Category5</th>
<th class="col-sm-1">Category6</th>
<th class="col-sm-1">Category7</th>
<th class="col-sm-2">Category8</th>
<th class="col-sm-2">Category9</th>
<th class="col-sm-1">Category10</th>
<th class="col-sm-1">Category100</th>
...