Bootstrap 5迁移后恢复Bootstrap 4表格边框样式的方法

将小型项目从Bootstrap 4迁移至Bootstrap 5时，发现无表头表格的边框样式存在差异：

• Bootstrap 4.6.2：无表头表格首行上方有边框，末行下方无边框
• Bootstrap 5.2.3：无表头表格首行上方无边框，末行下方有边框

需要一个全局生效、无需重复编码、适配任意行数表格的简便方案，本人是纯CSS新手，日常仅使用原生Bootstrap。

问题示例代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <title>Demo</title>
</head>
<body>

<main class="py-4">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Title</h5>
                        <p class="card-text">
                        <table class="table">
                            <tbody>
                            <tr>
                                <th scope="row">First entry</th>
                                <td>Some content</td>
                            </tr>
                            <tr>
                                <th scope="row">Second entry</th>
                                <td>Some content</td>
                            </tr>
                            <tr>
                                <th scope="row">Third entry</th>
                                <td>Some content</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>

效果对比 #

Bootstrap 4.6.2效果：

Bootstrap 5.2.3默认效果：

全局解决方案 #

只需在Bootstrap CSS之后添加一段自定义CSS，即可全局覆盖所有无表头表格的边框样式，和Bootstrap 4保持一致：

<style>
/* 精准匹配仅含tbody的.table，适配Bootstrap4边框逻辑 */
.table:has(> tbody:not(:has(+ thead, + tfoot))) tbody tr:first-child th,
.table:has(> tbody:not(:has(+ thead, + tfoot))) tbody tr:first-child td {
    border-top-width: var(--bs-border-width); /* 启用首行上边框 */
}
.table:has(> tbody:not(:has(+ thead, + tfoot))) tbody tr:last-child th,
.table:has(> tbody:not(:has(+ thead, + tfoot))) tbody tr:last-child td {
    border-bottom-width: 0; /* 移除末行下边框 */
}
</style>

方案说明 #

1. 使用CSS :has() 选择器精准定位仅包含tbody、无thead/tfoot的.table元素，不会影响带表头/表脚的表格
2. 复用Bootstrap内置变量--bs-border-width，保证边框粗细和原生样式一致
3. 全局自动生效，所有符合条件的表格无需额外添加类名

如果你的浏览器环境不支持:has()（如旧版Safari），可使用兼容方案（不会影响带thead的表格，因为thead的下边框会覆盖tbody首行的上边框）：

<style>
.table tbody tr:first-child th,
.table tbody tr:first-child td {
    border-top-width: var(--bs-border-width);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-bottom-width: 0;
}
</style>

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