How to make table fit in mobile view - html

Question

I am an HTML/CSS Noob and this is my first time making a website. The issue I can not seem to figure out is how I can get my table to "fit" in mobile view. As you can see the table does cuts off at the bottom and I want to have the entire table fit in the mobile view.
Normal View
Table Mobile view
table {
font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
font-size: 18px;
}
td, th {
border: 1px solid black;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: lightgray;
}
#media screen and (max-width: 767px) {
.left2, .main2 {
width: 100%;
}
thead {
display: none;
}
td {
display: block;
}
td:first-child {
background-color: black;
color: white;
}
td:nth-child(1)::before {
content: "Repair Type"
}
td {
text-align: center;
}
td::before {
float: left;
}
}
<table>
<thead>
<tr>
<th>Repair Type</th>
<th>Price</th>
<th>Turnaround Time</th>
</thead>
<tbody>
<tr>
<td>Battery Replacement</td>
<td>$50 - $100</td>
<td>Same Day</td>
</tr>
<tr>
<td>Camera Replacement</td>
<td>$30 - $105</td>
<td>Same Day</td>
</tr>
<tr>
<td>Charging Port Repair</td>
<td>$25 - $100</td>
<td>Same Day</td>
</tr>
<tr>
<td>Diagnostic</td>
<td>Free</td>
<td>Same Day</td>
</tr>
<tr>
<td>Ear Piece Replacement</td>
<td>$80</td>
<td>Same Day</td>
</tr>
<tr>
<td>Home Button Replacement - Select Models Only</td>
<td>$50 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Screen Repair</td>
<td>$30 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Water Damage Repair</td>
<td>$50 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Virus Removal</td>
<td>$80</td>
<td>Same Day</td>
</tr>
</tbody>
</table>

Answer 1

you can use the #media query for the table
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
#media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
}
what it does is that it looks for the display size and once a certain size is reached it triggers the CSS relative to that screen size, this is completely user-defined and you can modify it however you want