table 内的时间选择器

Question

在我的 Angular 应用中，我正在使用 timepicker widget from ngx-bootstrap。

在 table:

之外使用时看起来不错

但是，由于某些原因，它在 table 元素内使用时看起来非常丑陋：

我没有使用任何自定义 css 代码。

Answer 1

我花了一段时间才弄清楚那里发生了什么。问题是某些 bootstrap 样式附加到 .table 和类似的类（例如应用于 .table td 的规则）破坏了时间选择器的布局（因为它在内部也使用 table 元素).

我的解决方案是应用这种风格：

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

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

table 内的时间选择器

Timepicker inside table

css

ngx-bootstrap

angular