Добавленная кнопка в таблице изменяет высоту строки таблицы

Question

Я пытаюсь добавить кнопку в таблицу.

<tr key={key}>
                <td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" /></td>
                <td>{item.technology}</td>
                <td>17</td>
                <td title={item.jdName} className="jd-name-container justify-content-center align-items-center">
                  <div className="jdName">{item.jdName}</div>
                  {(key + 1 === 1) && <div className="badge new-badge badge-warning-custom">New</div>}
                </td>
                <td>30</td>
                <td>30</td>
                <td>
                  <button type="button"  class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">delete</a>
                  </div>
                </td>
              </tr>


#job-table table {
    display: flex;
    flex-flow: column;
    width: 100%;
}

#job-table thead {
    flex: 0 0 auto;
}

#job-table tbody {
    flex: 1 1 auto;
    display: block;
    height: 285px;
    overflow-y: scroll;
}

#job-table tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

Так что теперь, когда я пытался добавить кнопку, она меняет высоту строки,

Итак, это выглядитнапример,

Как мне решить эту проблему?

Таким образом, у меня действительно есть возможность установить высоту строки как высоту для кнопки или фиксированную высоту для кнопки.Итак, какое из этих решений будет лучше, я также хочу поддерживать его на более высоких разрешениях.