Table columns get cropped # lower resolutions (800 x 600 and lower) - html

Question

Well, I've got a really annoying problem: my table columns keep getting cut off at lower resolutions, particularly # 800 x 600.
Here's an example of how it should look like (1920 x 1080):
And here's how it looks # 800x600:
EDIT:
html:
<div class="tablewrapper">
<div class="center2">
<div class="component">
<table>
<tr>
<c:forEach items="${nombreColumnas}" var="columnas" >
<th><c:out value="${columnas}"/></th>
</c:forEach>
</tr>
<c:forEach items="${suscripciones}" var="item" >
<tr>
<td><c:out value="${item.idSuscripcion}"/></td>
<td><c:out value="${item.nombreCompleto}"/></td>
<td><c:out value="${item.fechaUltimoPago}"/></td>
<td><a href="">
<button type="button" class="button-table"><i class="fa fa-plus-circle"></i> Asignar apadrinado</button></a></td>
</tr>
</c:forEach>
</table>
</div>
</div>
css:
.tablewrapper {
display: inline-block;
position: relative;
margin-left: 10%;
width:80%;
max-width: 80%; }
.center2 {
display: inline-block;
position: relative;
margin-right: 100px;
width:100%;
max-width: 100%;}
What could it be?