css - 表内的时间选择器

Question

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

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

但是，由于某些原因，在 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;
      }
    }
  }
}