Timepicker внутри стола

Question

В моем приложении Angular я использую виджет timepicker из ngx-bootstrap .

Он отлично выглядит при использовании вне таблицы:

Тем не менее, по некоторым причинам это выглядит ужасно при использовании внутри элемента table:

Я не использую произвольный код CSS.

Answer 1

Мне понадобилось время, чтобы понять, что там происходит.Проблема заключалась в том, что какой-то стиль начальной загрузки, прикрепленный к .table, и схожие классы (например, правила, применяемые к .table td) нарушали компоновку устройства выбора времени (поскольку он внутренне также использует элемент table).

Мое решение былоприменяя этот стиль:

timepicker {
  table {
    tr {
      background-color: transparent !important;

      th,
      td {
        padding: 0 !important;
        vertical-align: middle !important;
        border: none !important;
      }
    }
  }
}