Table is not scrollable - html

Question

I coded a table and this table has so much information in it that if the page is on 100% more than half of the table is missing.
I hope you can help me. You have to add more of the table cells to recreate it.
body {
min-height: 100vh;
background-color: var(--body-color);
transition: var(--tran-05);
background-color: #18191a;
--body-color: #18191a;
--sidebar-color: #242526;
--primary-color: #3a3b3c;
--primary-color-light: #3a3b3c;
--toggle-color: #fff;
--text-color: #ccc;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
justify-content: center;
width: 75%;
padding: 2%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #201f1b;
}
table.content thead tr {
background-color: #403f46;
color: white;
font-weight: bold;
text-align: left;
}
table.content th,
table.content td {
padding: 12px 16px;
}
table.content tbody tr {
border-bottom: 1px solid #ccc;
}
table.content tbody tr:last-of-type {
border-bottom: 2px solid #403f46;
}
table.content tbody tr.active {
font-weight: bold;
color: #403f46;
}
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>

Answer 1

The problem is because of this:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
it calculates -50% on the y-axis, which results in a cut. This works fine, but not for long elements.
Instead of this, just using a div as a wrapper around the table.
Update your code like the following:
Html:
<div class="wrapper">
<table class="content">
<thead>
<tr>
<th>ServerID</th>
<th>Server Owner</th>
<th>Premium Server</th>
<th>Dev Server</th>
</tr>
</thead>
<tbody>
<tr>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
<td style='color: white'><b>Test</b></td>
</tr>
</tbody>
</table>
</div>
css:
div.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
table.content {
border-collapse: collapse;
margin: auto;
min-width: 400px;
border-radius: 5px 5px 0 0;
width: 75%;
padding: 2%;
color: #f9f9f9;
}
now it should work correctly.