Bootstrap 5表格tbody未填满宽度，行下划线不完整问题修复求助

代码片段 #

HTML

<body class="header">
    <div class="container-fluid">
        <div class="container d-flex justify-content-center">
            <p class="display-3">Password Vault</p>
        </div>
    </div>
    <div class="">
        <div class="d-flex justify-content-center align-items-center" style="height: 800px;">
            <div class="container border t-box col-5">
                <table class="table table-hover t-responsive" >
                    <tbody>
                        <tr>
                            <td>
                                Lorem ipsum dolor sit amet cons
                            </td>
                            <td class="d-flex justify-content-center">
                                <button type="button" class="btn btn-outline-light btn-sm">View</button>
                            </td>
                        </tr>   
                    </tbody>
                </table>
            </div>
        </div>
    </div>

CSS

.t-transparent{
    background-color: transparent;
}

.half-opaque{
    opacity: 50%;
}

.nav-t{
    height: 70px;
}

.t-box{
    border-radius: 10px;
    padding: 10px;
}

.t-responsive{
    display: block;
    max-height: 300px;
    overflow-y: scroll;
}

tr{
    max-width: 778px;
}

问题原因 #

你给表格添加的.t-responsive类设置了display: block，破坏了Bootstrap表格默认的display: table布局。表格布局下，tr会自动继承父容器宽度并铺满，但块级布局下，tbody和tr只会自适应内容宽度，导致行的下划线（border-bottom）无法铺满容器。另外tr上的max-width: 778px也会限制行的最大宽度，加重该问题。

修复方案 #

方案1：恢复表格布局并保留滚动（推荐）

修改.t-responsive样式，恢复表格默认布局的同时保留滚动效果：

.t-responsive{
    display: table; /* 恢复表格原生布局 */
    width: 100%; /* 强制表格占满父容器宽度 */
    max-height: 300px;
    overflow-y: auto; /* 给表格添加垂直滚动 */
}

/* 移除tr的宽度限制 */
tr{
    /* max-width: 778px; 删掉这一行 */
}

方案2：保持块级布局并强制铺满宽度

如果必须保留display: block，可以通过以下样式强制所有表格元素铺满宽度：

.t-responsive{
    display: block;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}

.t-responsive tbody,
.t-responsive tr{
    display: table;
    width: 100%;
    table-layout: fixed; /* 固定布局，让列宽度均分或自定义调整 */
}

/* 移除tr的宽度限制 */
tr{
    /* max-width: 778px; 删掉这一行 */
}

补充说明 #

使用table-layout: fixed可以让表格列宽度更可控，避免内容过长的列撑开表格。如果需要自定义列宽，直接给对应td设置width属性即可。

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