Table causes horizontal scrollbar to appear on mobile device - html

Question

My issue is this piece of code:
<form method="post" name="myform" class="donate-form">
<table class="donate-table">
<input type="hidden" name="cpp_header_image" value="logo.png">
<input type="hidden" name="on0" value="Donation Amount">
<tr>
<th>
<div class="check">
<input name="os0" type="radio" value="5.00" id="radio">
<label for="$5" id="textBlock">$5.00</label>
</div>
</th>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="25.00" id="radio">
<label for="$25" id="textBlock">$25.00</label>
</div>
</th>
</tr>
<tr>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="10.00" id="radio">
<label for="$10" id="textBlock">$10.00</label>
</div>
</th>
<th>
<div class="checkboxgroup">
<input name="os0" type="radio" value="Other" id="radio">
<label for="other" id="textBlock">Custom</label>
</div>
</th>
</tr>
</table>
The issue is within the table "donate-table" closer to the bottom. I have 4 radio buttons, 5,10,25, and other, I want these radio-buttons to be displayed in 2 rows with 2 columns. On chrome (fullscreen) everything looks perfect no horizontal scroll bar and all radio buttons are looking okay but when I shrink the window to be as small as possible or when I use my mobile device the radio buttons get cut off and on my smartphone a horizontal scrollbar appears (I know the issue is because of a smaller screen size but I can't seem to fix it) When I delete 3 radio buttons and only have 1 the problem is gone. How can I fix this so I can display 4 radio buttons without a horizontal scrollbar appearing? I have looked and tried overflow-x:hidden; and some other suggested solutions but none work.
Anyone have a fix? Thank you in advance.
Here is my CSS code if needed:
.donations{
margin-top: 15%;
overflow: hidden;
}
.checkboxgroup {
text-align: center;
display: inline-block;
min-width: 150px;
}
.checkboxgroup label {
display: inline-block;
font-size: 20px;
}

Answer 1

Go through the code comments. Hope this will help you.
01. Replace all <th></th> with <td></td>
02. /* use .donate-table instead of .donations */
03. /* move min-height property to parent class (means .donate-table class) */
/* use .donate-table instead of .donations */
.donate-table{
margin-top: 15%;
overflow: hidden;
width:100%;
min-width:160px;
max-width:500px;
}
/* move min-height property to parent class (means .donate-table class) */
.checkboxgroup {
display: inline-block;
}
.checkboxgroup label {
display: inline-block;
}
<form method="post" name="myform" class="donate-form">
<table class="donate-table">
<input type="hidden" name="cpp_header_image" value="logo.png">
<input type="hidden" name="on0" value="Donation Amount">
<tr>
<td> <!-- Replace all <th></th> with <td></td> -->
<div class="check">
<input name="os0" type="radio" value="5.00" id="radio">
<label for="$5" id="textBlock">$5.00</label>
</div>
</td>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="25.00" id="radio">
<label for="$25" id="textBlock">$25.00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="10.00" id="radio">
<label for="$10" id="textBlock">$10.00</label>
</div>
</td>
<td>
<div class="checkboxgroup">
<input name="os0" type="radio" value="Other" id="radio">
<label for="other" id="textBlock">Custom</label>
</div>
</td>
</tr>
</table>