https://i.sstatic.net/fNPD0.pngI am utilizing bootstrap 4 tables to design a customizable 24 x 7 hourly scheduler. My challenge lies in aligning the radio buttons horizontally within each table cell, ensuring that they are given the necessary width individually. However, I am facing difficulties in achieving this, particularly when the table extends beyond the screen width, requiring horizontal adjustment.
The snippet of code illustrating this problem is as follows:
<div class="row form-group ml-md-2 mr-md-2">
<div class="col-md-12">
<table class="table table-bordered table-responsive table-hover table-striped table-condensed">
<thead>
<tr>
<th></th>
<th>8am</th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12pm</th>
<th>13pm</th>
<th>14pm</th>
<th>15pm</th>
<th>16pm</th>
<th>17pm</th>
<th>18pm</th>
<th>13pm</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Sun</strong></td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="Manual" />
<span <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3928083de85929f9a9792879a9c9c">(Email shown here)</a>></span>Manual
</label>
</div>
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="On" />
<span <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6978586db80997a7977829f99">(Email shown here)</a>></span>On
</label>
</div>
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="Off" />
<span <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7a686b366d727471737e7235367d7442224b74627131617"> </a>></span>Off
</label>
</div>
</div>
</td>
... @*Repeat this <td></td> for other day - time cells. *@
</tr>
</tbody>
</table>
</div>
</div>
[![enter image description here][1]][1]