Bootstrap vertically align text in cell with button in a different cell - html

Question

I have a table containing 3 columns of text and a fourth column with a button in it.
Normally the text in the text cells do not align vertically with the text in the button because the button gets a vertical-align value of 'middle'. So far they only way I've gotten the text in the text cells to align with the button text is to wrap them in a span and add an align-middle class. This seems like a fair amount of html bloat. Is there another way?
Here's an example of a table where some cells align and some don't, through the use of the extra span element.
I'm using bootstrap 5 but I think this applies to previous versions as well.
Edit
I've tried comparing different approaches
table with no vertical alignment classes
vertical alignment specified on the td
vertical alignment specified on the table
vertical alignment specified on a span in the td
#2 and #3 are functionally equivalent, but when some cells wrap and cause the row height to grow, text in cells that do not wrap center vertically within the entire cell.
#4, when some cells wrap and cause the row height to grow, text in cells that do not wrap still appear near the top, and are aligned closer to the alignment of the button text, but not perfectly, and the alignment is best with table-sm and btn-sm are used, but if the btn is different size alignment is thrown off.
<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>

Answer 1

Instead of using a span with .align-middle. Just add the align-middle class directly on the td.
I added a bottom border to the last tr to visualize alignment.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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">Date</th>
<th scope="col">Drug Name</th>
<th scope="col">Number</th>
<th scope="col" />
</tr>
</thead>
<tbody>
<tr>
<td data-col="Date" class="align-middle">12/14/2022</td>
<td data-col="Drug" class="align-middle">hydroxyurea</td>
<td data-col="Number" class="align-middle">1</td>
<td class="text-end" class="align-middle">
<a class="btn btn-sm btn-outline-primary" href="#">Edit</a>
</td>
</tr>
<tr class="border-bottom">
<td data-col="Date" class="align-middle">12/14/2022</td>
<td data-col="Drug" class="align-middle">doxorubicin</td>
<td data-col="Number" class="align-middle">1</td>
<td class="text-end" class="align-middle">
<span class="btn btn-sm btn-outline-dark disabled">Edit</span>
</td>
</tr>
</tbody>
</table>