css - 表格内的时间选择器

Question

在我的 Angular 应用程序中，我使用了 timepicker来自 ngx-bootstrap 的小部件.

在 table 外使用时看起来不错:

但是，由于某些原因，当在 table 元素中使用时，它看起来 super 丑陋:

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

Answer 1

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

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

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

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