Timepicker inside table

Question

In my Angular app, I'm using the timepicker widget from ngx-bootstrap.

It looks fine when used outside a table:

However, for some reasons it looks super-ugly when used inside a table element:

I'm not using any custom css code.

Answer 1

It took me a while to figure out what was happening there. The problem was some bootstrap style attached to .table and similar classes (e.g. rules applied to .table td) was breaking the timepicker's layout (since it internally also uses a table element).

My solution was applying this style:

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

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