WordPress/CSS make the table (Tablepress) responsive and user-friendly for mobiles

Question

I created a table in WordPress using the plugin 'Tablepress'. Below is the image of the table thats been created.

I added custom css to the table to add some styling and make it responsive for the mobile devices. Below is the css code:

`.tablepress-id-1 thead th {
background-color: #B82601;
color: #ffffff;
border: 1px solid #f1f1f1;
position: sticky;
top: 0;
}

.tablepress-id-1 tbody td {
border: 1px solid #f1f1f1;
text-align: center;
vertical-align: middle;
font-size: 14px;
}

.tablepress-id-1 tbody td {
background-color: #ffffff;
}

.tablepress .button {
display: inline-block;
outline: 0;
border: 0;
cursor: pointer;
background-color: #4299e1;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: white;
line-height: 26px;
}

.tablepress .button-visit {
display: inline-block;
outline: 0;
border: 0;
cursor: pointer;
background-color: #FF8C00;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: white;
line-height: 26px;
 }

/*Responsive*/
@media only screen and (max-width:700px) {
.tablepress-id-1 tbody td {
    font-size: 12px;
}

.tablepress-id-1 tbody td.column-1 {
    width: 100%;
}

.tablepress-id-1 tbody td.column-2,
.tablepress-id-3 tbody td.column-3 {
    width: 50%;
}

.tablepress-id-1 tbody td.column-4,
.tablepress-id-3 tbody td.column-5 {
    width: 50%;
}

.tablepress-id-1 thead th {
    font-size: 16px;
}

.tablepress-id-1 table {
    overflow-x: scroll;
}
 }`

and the responsive output is attached below

But what I expect is to have the just two or three columns on screen and scroll through the next two columns. I tried searching on the internet and couldn't find a solution for this, as the table was created using a plugin.

I would really appreciate if someone can help me with this problem and make the table, more user friendly and responsive for mobiles.