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

Question

我正在使用 bootstrap 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 asp-validation-for=@Model.MachineState></span>Manual
                               </label>
                           </div>
                           <div class="radio">
                               <label class="control-label font-weight-bold">
                                   <input type="radio" asp-for="@Model.MachineState" value="On" />
                                   <span asp-validation-for=@Model.MachineState></span>On
                               </label>
                           </div>
                           <div class="radio">
                               <label class="control-label font-weight-bold">
                                   <input type="radio" asp-for="@Model.MachineState" value="Off" />
                                   <span asp-validation-for=@Model.MachineState></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

正如您的评论所说，您需要添加最小宽度以使它们保持水平。

你只需要在 style 中添加如下 css 代码。

<style>
    .table td:not(:first-child) {
        min-width: 100px;
    }
</style>

结果如下：

Answer 2

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;