I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with:
<table>
<tr>
<td> First Name </td>
<td> <input type="text" class="profile_input"> </td>
<td> Student ID </td>
<td> <input type="text" class="profile_input"> </td>
</tr>
<tr>
<td> Last Name </td>
<td> <input type="text" class="profile_input"> </td>
<td> Class </td>
<td> <select class="select_input">
<option value="volvo">V1L</option>
<option value="saab">V1C</option>
<option value="mercedes">V1E</option>
<option value="audi">V1F</option>
</select>
</td>
</tr>
<tr>
<td> Address </td>
<td > <input type="text" class="profile_input size2"> </td>
<td> Field of Study </td>
<td > SNE <input type="radio" class="profile_input" name="FieldofStudy"> </td>
<td > BIM <input type="radio" class="profile_input" name="FieldofStudy"> </td>
<td > SIE <input type="radio" class="profile_input" name="FieldofStudy"> </td>
<td > SNE <input type="radio" class="profile_input" name="FieldofStudy"> </td>
</tr>
<tr>
<td> Email </td>
<td> <input type="text" class="profile_input"> </td>
</tr>
<tr>
<td> Phone Number </td>
<td> <input type="text" class="profile_input"> </td>
</tr>
<tr>
<td> Gender </td>
<td> Male<input type="radio" name="gender" class="profile_input">
Female<input type="radio" name="gender" class="profile_input"> </td>
</tr>
<tr>
<td> Date of Birth </td>
<td> <input type="date" class="profile_input"> </td>
</tr>
</table>
Alongside the CSS styling for the table:
table {
width:100%;
margin-top:25px;
margin-bottom:25px;
}
input[type="text"], input[type="date"], .select_input {
min-height:30px;
border:1px solid black;
padding:5px;
width:75%;
}
table tr {
padding-bottom:5px;
}
.size2 {
min-height:60px!important;
}
Currently, the table consists of a left side and a right side. The left side is basic, while the right side needs to include a list of four radio buttons displayed vertically.