vuejs-datepicker置于Bootstrap带table类表格中样式错乱如何解决

Bootstrap 自带的 .table 类会为表格单元格<td>强制设置固定的内边距、行高、box-sizing规则，和vuejs-datepicker组件自带的输入框布局样式不兼容，导致组件内部元素对齐错乱。

方案1：局部重置日期选择器所在单元格的样式 #

给放置datepicker的<td>添加自定义类，单独重置冲突样式，不影响其他表格的正常使用：

<tr>
  <td class="datepicker-container">
    <datepicker></datepicker>
  </td>
</tr>

添加对应的样式：

/* 重置td的冲突样式 */
.datepicker-container {
  padding: 0 !important;
  line-height: initial !important;
  box-sizing: content-box !important;
}
/* 按需调整输入框的边距，保持和其他表格单元格内容对齐 */
.datepicker-container .vdp-datepicker input {
  margin: 0.375rem;
}

方案2：给日期选择器套外层容器隔离样式 #

如果不想修改表格单元格的样式，可以在datepicker外层套一个独立容器，隔离Bootstrap表格的样式影响：

<tr>
  <td>
    <div class="dp-wrapper">
      <datepicker></datepicker>
    </div>
  </td>
</tr>

添加对应的样式：

.dp-wrapper {
  width: 100%;
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Sanaulla