如何覆盖表的默认CSS

Question

这个问题已经在 stackoverflow 上了。 但解决方案对我不起作用。 实际上我正在做一个 Angular 项目。 我想将Mode of comparison和中间的相应Dropdown相互对齐。 这是我正在创建的小部件。 我已经在图片中清楚地标记了该部分：

这是我的 HTML： 注意： pt-label 、 dls-combobox和dls-option是我定制的角度组件。

<table>
  <tbody>
    <tr class="my-row">
      <td class="first-col1">
        <div class="comparing-switch1">
          <pt-label>Mode of comparison&nbsp;</pt-label>
        </div>
      </td>
      <td class="second-col1">
        <div class="comparing-label1">
          <dls-combobox placeholder="Time average">
            <dls-option>
              <pt-label>Time average</pt-label>
            </dls-option>
          </dls-combobox>
        </div>
      </td>
    </tr>
  </tbody>
</table>

这是我的 CSS：

.my-row {
    background: cornflowerblue;
}

.first-col1 {
    background: magenta;
    width: 50% !important;
}

.second-col1 {
    width: 100%;
    background: blueviolet;
    padding-bottom: 10px;
}

table.stats tbody tr:nth-child(even) {
    vertical-align: middle !important;
}

table.stats tbody tr {
    vertical-align: middle !important
}

即使我尝试通过margin和padding设置它，即使类名不同，它们也会移动。 我还注意到一件事。 当我检查元素table时。 当我从这两个地方删除vertical-align: baseline时（如下图所示），我的问题就解决了：

我的代码有什么问题。 请纠正我。

Answer 1

这里vertical-align: baseline属性应用于表格。 vertical-align: middle !important适用于tr元素。 因为 table 具有该属性 tr 本身在基线中对齐。 尝试为表格添加vertical-align: middle