表格中的添加按钮更改表格行的高度

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

现在，当我尝试添加按钮时，它会更改行的高度，

所以看起来，

我该如何解决？

因此，我实际上有一个选项，可以将行的高度设置为按钮的高度，也可以将固定高度设置为按钮的高度。因此，这些解决方案中哪一种会更好，我也希望在更高的分辨率上也能提供支持。