Bootstrap 4 таблица - горизонтальное выравнивание содержимого ячейки не работает

Question

Я использую bootstrap 4 таблицы, чтобы создать настраиваемый 24-часовой почасовой планировщик. Мне нужно, чтобы переключатели в каждой ячейке таблицы были выровнены по горизонтали, всегда давая каждой ячейке таблицы необходимую ей ширину, но я изо всех сил стараюсь, чтобы это работало. Обратите внимание, что проблема возникает, когда таблица превышает ширину экрана и требуется горизонтальный регулятор.

Код, выделяющий эту проблему, выглядит следующим образом:

<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

Как сказано в вашем комментарии, вам нужно добавить минимальную ширину, чтобы они оставались горизонтальными.

Вам просто нужно добавить следующий код css в стиле.

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

Вот результат:

Answer 2

1) Если вы используете bootsrap4, добавьте класс form-check-inline, чтобы переключатели отображались в одной строке. проверьте радиолинии для справки.

2) table имеет автоматическую настройку размера, он будет регулироваться автоматически, поэтому вместо автоматической прокрутки для каждой ячейки можно автоматически прокрутить до весь стол Используя CSS ниже классов

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

3) отметьте ниже горизонтальная прокрутка с встроенными переключателями для ссылки.

4), но если вы хотите получить автоматическую прокрутку для каждой ячейки, создать класс и добавить ниже CSS к каждой <td>

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