Bootstrap表格文本单元格与按钮单元格的垂直对齐方案

我有一个包含3列文本和1列按钮的表格。默认情况下，文本单元格的文本无法与按钮文本垂直对齐，原因是按钮的vertical-align值为middle。目前我只能通过将文本包裹在<span>中并添加align-middle类实现对齐，但这会增加HTML冗余，想知道有没有其他方法。

以下是通过额外<span>元素实现部分单元格对齐的表格示例，我使用的是Bootstrap 5，该问题同样适用于旧版本。

编辑补充：测试的四种方案 #

我测试了以下四种实现方案：

• 无垂直对齐类的表格
• 在<td>上指定垂直对齐
• 在<table>上指定垂直对齐
• 在<td>内的<span>上指定垂直对齐

方案效果说明 #

• 方案2和3：功能等效，但当部分单元格内容换行导致行高增加时，未换行的文本会在单元格内垂直居中。
• 方案4：当部分单元格内容换行导致行高增加时，未换行的文本仍会靠近顶部，更接近按钮文本的对齐效果，但不够完美；仅在搭配table-sm和btn-sm时对齐效果最佳，按钮尺寸变化会破坏对齐。

测试代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<span>No classes</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
  <thead>
<tr class="my-2">
  <th scope="col">Drug Name</th>
  <th scope="col">Number</th>
  <th scope="col" />
</tr>
  </thead>
  <tbody>
<tr>
  <td>wrapping text here this is a test wrapping text here this is a test</td>
  <td>1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
  <td>wrapping text here this is a test wrapping text here this is a test</td>
  <td>1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
  </tbody>
</table>

<span>Align-middle on td</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
  <thead>
<tr class="my-2">
  <th scope="col">Drug Name</th>
  <th scope="col">Number</th>
  <th scope="col" />
</tr>
  </thead>
  <tbody>
<tr>
  <td class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
  <td class="align-middle">1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
  <td class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
  <td class="align-middle">1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
  </tbody>
</table>

<span>Align-middle on table</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2 align-middle" id="drugSearchList">
  <thead>
<tr class="my-2">
  <th scope="col">Drug Name</th>
  <th scope="col">Number</th>
  <th scope="col" />
</tr>
  </thead>
  <tbody>
<tr>
  <td>wrapping text here this is a test wrapping text here this is a test</td>
  <td>1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
  <td>wrapping text here this is a test wrapping text here this is a test</td>
  <td>1</td>
  <td class="text-end"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
  </tbody>
</table>

<span>Align-middle on td span</span>
<table class="table table-sm table-striped table-hover table-borderless table-stacked-md label-20 mt-2" id="drugSearchList">
  <thead>
<tr class="my-2">
  <th scope="col">Drug Name</th>
  <th scope="col">Number</th>
  <th scope="col" />
</tr>
  </thead>
  <tbody>
<tr>
  <td><span class="align-middle">wrapping text here this is a test wrapping text here this is a test</span></td>
  <td><span class="align-middle">1</span></td>
  <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="#">Edit</a></td>
</tr>
<tr class="border-bottom">
  <td><span class="align-middle">wrapping text here this is a test wrapping text here this is a test</td>
  <td><span class="align-middle">1</span></td>
  <td class="text-end" class="align-middle"><a class="btn btn-sm btn-outline-dark disabled">Edit</a></td>
</tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Jeremy