bootstrap datetimepicker和固定表头冲突

Question

我使用angularjs，bootstrap datetimepicker作为输入，在表格中显示带有固定标题的列表。因此，我的datetimepicker如下所示加扰。

编辑：链接到plunker

在css中如果我从下面的代码中删除float: left;，那么我的日期选择器就没问题了。但是桌子没有对齐。请帮我解决这个问题。

.table-fixed tbody td, thead th {
            width: 14.2%;
            float: left;
        }

完整的CSS

.table-fixed {
            width: 100%;
        }
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }
.table-fixed thead th {
            height: 60px;
        }        

 .table-fixed thead {
 }
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
 }

.table-fixed tbody td, thead th {
            width: 14.2%;
            float: left;
        }