如何解决Bootstrap响应式表格中按钮下沉到底部的问题？

针对小屏幕下操作按钮下沉的问题，给你几个有效解决方案：

方案一：强制操作列单元格垂直居中 #

Bootstrap表格的<td>默认垂直对齐为middle，但可能被其他样式覆盖。直接给操作列的<td>添加align-middle内置类，同时保留宽度设置确保按钮区域有足够空间：

<td class="align-middle" style="width: 300px;">
    <a href="" class="text-decoration-none">
        <button class="btn btn-primary btn-sm">Lihat</button>
    </a>
    <a href="" class="text-decoration-none">
        <button class="btn btn-warning btn-sm">Edit</button>
    </a>
    <a href="" class="text-decoration-none">
        <button class="btn btn-danger btn-sm">Hapus</button>
    </a>
</td>

方案二：用Bootstrap Flex类优化按钮布局（解决flex导致的多余间距） #

如果想用flex布局，不要直接给<td>加display:flex，而是在<td>内部嵌套容器，用Bootstrap的d-flex和gap-2类控制按钮间距，同时保证垂直居中：

<td class="align-middle" style="width: 300px;">
    <div class="d-flex gap-2">
        <a href="" class="text-decoration-none">
            <button class="btn btn-primary btn-sm">Lihat</button>
        </a>
        <a href="" class="text-decoration-none">
            <button class="btn btn-warning btn-sm">Edit</button>
        </a>
        <a href="" class="text-decoration-none">
            <button class="btn btn-danger btn-sm">Hapus</button>
        </a>
    </div>
</td>

gap-2类会自动控制按钮间的间距，避免手动设置margin带来的适配问题，小屏幕下按钮会自动换行但保持垂直居中。

方案三：全局设置表格单元格垂直居中 #

如果希望所有表格单元格都垂直对齐，给<table>标签添加自定义类或直接写入CSS：

.table td, .table th {
    vertical-align: middle;
}

这样所有单元格内容都会垂直居中，从根本上解决行内内容对齐不一致的问题。

另外注意：你的空状态<td>的colspan应该设为5（表格共5列），否则会导致布局错乱：

<tr>
    <td colspan="5" class="bg-danger text-light"> Tidak ada data</td>
</tr>

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