How to override default css of table

Question

This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:

Here is my HTML: Note: pt-label , dls-combobox and dls-option are my custom made angular components.

<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>

and here is my 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
}

Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table . When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:

What is wrong with my code. Please correct me.

Answer 1

Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element. since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table