JSFiddle - React, Tailwind, and code Playground
HTML
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
font-family: sans-serif;
font-weight: 400;
background: #e6e6e6;
/color: lightslategrey;
}
img {
visibility: hidden;
padding-left: 8px;
padding-right: 8px;
}
h1 {
text-transform: uppercase;
font-size: 50px;
font-weight: 500;
}
table{
text-align: center;
width:100%;
height: 300px;
table-layout: fixed;
overflow: scroll;
border-spacing: 0px;
}
th {
font-size: 30px;
font-weight: 400;
padding:10px;
background: grey;
}
.opts {
width: 75px;
}
table tbody tr:hover {
background: lightblue;
transition-duration: 0s;
}
table tbody tr:hover img {
visibility: visible;
}
td {
padding: 5px;
border-block: 2px solid lightgrey;
font-size: 20px;
}
</style>
<title>Med dataset</title>
</head>
<body>
<div id="app">
<div id="parent">
<h1 style="text-align: center;">Med dataset</h1>
<div class="table scroll">
<table class="table-bordered table-hover">
<thead>
<tr>
<th class="opts"></th>
<th>Name</th>
<th>Gender</th>
<th>Birth date</th>
<th>Address</th>
<th>OMS</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="delete.png" width="25px" height="25px"><img src="update.png" width="25px" height="25px"></td>
<td>Ab Bc Cd</td>
<td>M</td>
<td>1999-01-01</td>
<td>Street 1</td>
<td>0001</td>
</tr>
<tr>
<td><img src="delete.png" width="25px" height="25px"><img src="update.png" width="25px" height="25px"></td>
<td>Ab Bc E</td>
...
CSS
.scroll{
height: 300px;
overflow-y: auto;
}