css - 设置表格行之间线条的粗细

Question

如何更改两个表格行之间的线条粗细 例如:

(突出显示的那个)。

这就是我的代码目前的样子:

i {
  cursor: pointer;
}

a {
  color: inherit;
}

th {
  white-space: pre-wrap;
  font-size: 25px;
  color: goldenrod;
}

p {
  font-family: 'BioRhyme', serif;
  font-size: 35px;
}

<table class="table table-hover table-borderless">
  <thead class="thead-dark">
    <tr>
      <th>Name</th>
      <th>IP</th>
      <th>Port</th>
      <th>Ping</th>
      <th>Players</th>
    </tr>

  </thead>
  <tbody id="table">
    <tr>
      <th>Hexah's Test</th>
      <th>0.0.0.0</th>
      <th>27015</th>
      <th>koala</th>
    </tr>
    <tr>
      <th>Hexah's Test</th>
      <th>0.0.0.0</th>
      <th>27015</th>
      <th>koala</th>
    </tr>
  </tbody>
</table>

我正在使用 Bootstrap Material Design v4

谢谢!

Answer 1

您可以在 CSS 文件中使用它来增加表格中元素之间的边框宽度:

td {
  border-bottom: 5px solid black;
  border-top: 5px solid black;
}

您可以使用这 3 个值更改边框的 color、thickness 和 style。当然，您也可以将这些属性添加到 th 和 table，将 border 样式更改为其他边:

• 边框
• border-right
• border-left

了解有关 CSS 表格的更多信息 here .