Bootstrap 4表-单元格内容的水平对齐不起作用

Question

我正在使用引导程序4表来创建可配置的24 x 7每小时调度程序。我需要通过始终为每个表格单元提供所需的宽度来水平对齐每个表格单元中的单选按钮，但是我正在努力使其正常工作。请注意，当工作台超出屏幕宽度并且需要水平调节器时，会发生此问题。

突出显示此问题的代码如下：

<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 [email protected]></span>Manual
                               </label>
                           </div>
                           <div class="radio">
                               <label class="control-label font-weight-bold">
                                   <input type="radio" asp-for="@Model.MachineState" value="On" />
                                   <span [email protected]></span>On
                               </label>
                           </div>
                           <div class="radio">
                               <label class="control-label font-weight-bold">
                                   <input type="radio" asp-for="@Model.MachineState" value="Off" />
                                   <span [email protected]></span>Off
                               </label>
                           </div>
                       </div>
                   </td>
                   ...  @*Repeat this <td></td> for the other day - time cells. *@ 

               </tr>
           </tbody>
       </table>
   </div>
</div>
[![enter image description here][1]][1]

Answer 1

1]如果您正在使用bootsrap4，请为单选按钮添加类form-check-inline，使其出现在同一行上。检查radio-line以供参考。

2）table是自动调整大小的，它将自动调整，因此与其对每个单元格进行自动滚动，不对整个表格进行自动滚动。通过在类下使用CSS

  overflow-y: hidden;
  overflow-x: auto;

3）检查horizontally-scroll with radio-buttons inline下面是否有反射。

4），但是如果您想让每个单元格自动滚动，请创建一个类，并在下面的CSS上添加到每个<td>

    max-width: 20px;
    overflow-y: auto;