如何解决为什么border-separate：collapse 会破坏Bootstrap[ 中的边界表？
我有一个带边框的表，使用 Bootstrap 类 table table-bordered。如果我添加 border-collapse: separate，边框会正确分隔，但顶部和底部的宽度为零，因此不可见。
这是 Bootstrap 的怪癖，还是我做错了什么？如果是这样，正确的方法是什么？
.table-bordered {
border-collapse: separate;
}<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="/test.css">
</head>
<body>
<container>
<div class="row">
<div class="col-6">
<table class="table table-bordered m-5">
<tbody>
<tr>
<td>Box</td>
<td rowspan=2>Big Box</td>
<td>Box</td>
</tr>
<tr>
<td>Box</td>
<td>Box</td>
</tr>
</tbody>
</table>
</div>
</div>
</container>
</body>
</html>解决方法
在 bootstrap css border-width: 1px 0 中，所以你需要过夜
.table-bordered {
border-collapse: separate;
}
.table-bordered td {
border-width: 1px !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="/test.css">
</head>
<body>
<container>
<div class="row">
<div class="col-6">
<table class="table table-bordered m-5">
<tbody>
<tr>
<td>Box</td>
<td rowspan=2>Big box</td>
<td>Box</td>
</tr>
<tr>
<td>Box</td>
<td>Box</td>
</tr>
</tbody>
</table>
</div>
</div>
</container>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
