即使我的表格单元格比表格标题小，我如何让我的行有边框答案

【问题标题】：How can i make my rows have border even when my table cells are smaller in size then table headers即使我的表格单元格比表格标题小，我如何让我的行有边框
【发布时间】：2021-06-12 02:56:28
【问题描述】：

我正在使用 boostrap 表。

如果我有这张桌子，那么一切似乎都很好



<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

但我发出 http 请求，有时我的 td 会比 th 小，例如也许我会有 7 个th，但是当我发出 http 请求时，我只会得到前三个的数据 td

例如


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">City</th>
      <th scope="col">Zip</th>
      <th scope="col">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

在这种情况下，我的桌子看起来很糟糕。

请看下图 https://ibb.co/x5Pj618

这是因为我可以看到 bootstrap 具有以下 css 类

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

这就是当我没有td 时我没有border-top 的原因。

在我的情况下，即使我有三个 td，我也希望此边框顶部应用于整个表格直到结束。

为此，我不想生成空的 td - 因为我现在需要显示 td，如果有来自后端的空值。

即使td 较少，我如何为每一行应用border-top？

我试过了

在我的tr 上添加边框，而不是在每个td 上添加边框，但没有成功。我再次获得边框，直到最后一个 td，而不是直到表格的整个宽度

.tr {
   border-top:2px solid #dee2e6;
}

我该如何解决这个问题？

【问题讨论】：

你必须添加空td。
为什么你认为没有别的办法？
如果添加border-collapse:collapse;到你的桌子上，然后添加 tr {border-top: 2px solid #dee2e6 } 那么它应该可以工作

标签： html css bootstrap-4

【解决方案1】：

如果您想从td 中删除边框并为tr 添加顶部边框而不影响thead，您可以将.table-borderless 应用于tbody 和.border-top 到每个@987654327 @。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">City</th>
      <th scope="col">Zip</th>
      <th scope="col">Country</th>
    </tr>
  </thead>
  <tbody class="table-borderless">
    <tr class="border-top">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="border-top">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="border-top">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【讨论】：

我复制粘贴了您的代码。但它没有工作。我的 html 文件中还包含 bootstrap 4 cdn
我复制粘贴了整个 html 代码。我需要包含一些自定义 css 以便您的示例可以工作吗？
不，它在代码 sn-p 中工作。您是否使用任何自定义 css？ bs 的确切版本是什么？
我使用的是 bs 版本 4
好的，在我的例子中 exact 版本是 4.6.0

【解决方案2】：

这是因为您使用了类名来设置 tr 样式。但是没有这样的名为“tr”的类，它是一个元素。所以你应该删除 css 代码中的点 (.) 符号。
遵循此代码

  tr {
     border-top:2px solid #dee2e6;
  }
  td,th {
   border: none;
  }

【讨论】：