为什么border-separate:collapse会在Bootstrap [?答案

【问题标题】：Why does border-separate: collapse break bordered tables in Bootstrap[?为什么border-separate:collapse会在Bootstrap [?
【发布时间】：2021-03-31 21:16:33
【问题描述】：

我有一个带边框的表格，使用 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>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-5

【解决方案1】：

在引导 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>

【讨论】：

我可以这样做，但是我不使用border-collapse: separate时，表格怎么会有所有边框？