I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically:
https://i.sstatic.net/rMqSR.png
This is how the HTML appears:
.table > tbody > tr > td {
vertical-align: center;
background-color: lightgreen;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<tr class="d-flex">
<th class="col-2">Item 01</th>
<th class="col-2">Item 02</th>
<th class="text-center col-4">Buttons</th>
<th class="text-right col-2">Item 04</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">
<div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
height: 80px;
border-radius: 100%;
background-size: cover;">
</div>
</td>
<td class="col-2 text-center">Hey!</td>
<th class="col-4">
<div class="row no-gutters">
<div class="col-2">
<button class="btn btn-secondary btn-block">
-
</button>
</div>
<div class="col-8">
7 in cart
</div>
<div class="col-2">
<button class="btn btn-secondary btn-block">
+
</button>
</div>
</div>
</th>
<th class="col-2 text-right">Item 04</th>
</tr>
</tbody>
</table>
</div>I am puzzled as to why the items are not vertically aligned even though the background-color has been set. Can someone please suggest how I can align them vertically?
Any assistance on this matter would be highly appreciated.
Here is a codeply sample for reference.