In my table, I have 3 columns of text and a fourth column with a button. The alignment of the text in the cells does not match the button text vertically due to the button having a vertical-align value of 'middle'. To align them properly, I currently wrap the text cells in a span and add an align-middle class. However, this method seems to introduce unnecessary html bloat. Is there another solution?
Below is an example of a table where some cells align while others do not, using an extra span element.
I am using Bootstrap 5, but I believe this issue applies to previous versions as well.
Edit I have tried different approaches:
- No vertical alignment classes added to the table.
- Vertical alignment specified on the td elements.
- Vertical alignment specified on the table itself.
- Vertical alignment specified on a span within the td element.
#2 and #3 produce similar results, however, when cells wrap and increase row height, the text in unwrapped cells centers vertically within the cell.
#4, when cells wrap and increase row height, the text in non-wrapping cells remains close to the top and aligns better with the button text, especially with certain styles applied like table-sm and btn-sm. However, if buttons are of different sizes, the alignment may be off.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f342a3428">[email protected]</a>/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>