JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<table class="table table-borderless">
	<thead class="table-header">
		<tr class="row-filters">
			<th class="column-filter column-check"></th>
			<th class="column-filter column-name">
				<input value="@FilterName" type="text" class="form-control form-control-sm" placeholder="Name">
			</th>
			<th class="column-filter column-description">
				<input value="@FilterDesc" type="text" class="form-control form-control-sm" placeholder="Description">
			</th>
			<th class="column-filter column-id">
				<input type="text" class="form-control form-control-sm" placeholder="ID">
			</th>
			<th class="column-filter column-date-pub">
				<input type="text" class="form-control form-control-sm" placeholder="Date of Publication">
			</th>
			<th class="column-filter column-date-app">
				<input type="text" class="form-control form-control-sm" placeholder="Date of Approval">
			</th>
			<th class="column-filter column-changenumber">
				<input type="text" class="form-control form-control-sm" placeholder="ChangeNumber">
			</th>
			<th class="column-filter column-status">
				<input type="text" class="form-control form-control-sm" placeholder="Status">
			</th>
		</tr>
	</thead>

	<tbody class="table-body">

		<tr>
			<td class="column-check"><input type="checkbox"></td>
			<td class="column-name">Aenean et.</td>
			<td class="column-description">Efficitur.</td>
			<td class="column-id">Cras amet.</td>
			<td class="column-date-pub">Nullam ut.</td>
			<td class="column-date-app">Fusce non.</td>
			<td class="column-changenumber">Morbi dui.</td>
			<td class="column-status">Cras eget.</td>
		</tr>

		<tr>
			<td...

CSS

.column-check { width: 20px; }
.column-name { width: 21%; }
.column-description { width: auto; }
.column-id { width: 6%; }
.column-date-pub { width: 14%; }
.column-date-app { width: 14%; }
.column-changenumber { width:  10%; }
.column-status { width: 10%; }

table tr:hover {
  background: rgba(0,0,255,.2);
}

@media screen and (max-width: 800px) {
  table {
    background: rgba(255,0,0,.2);
  }
  
  .column-filter {
    width: 100%;
  }
  
  th, td {
    display: block;
  }
}