表内的时间选择器

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;
      }
    }
  }
}