如何覆蓋表的默認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