如何使用CSS在HTML中处理表格标记的边框？

Question

我正在制作HTML游戏的排行榜。我决定使用z-index:值，以便将元素放置在HTML画布的顶部。对于排行榜，我决定使用<table>，因为稍后它将简化排行榜的功能。但是，我试图使表看起来不错，因此在使用CSS时遇到了麻烦。我决定在HTML中而不是在单独的CSS文件中实现CSS，因为在这一点上，我只是在检查它是否有效。我正在尝试做的是在所有单元格周围都有一个边框，或者有一条垂直线区分两个标题。下面是我的代码：

<table id = Name&Time
       style=
           "z-index: 2;
            position: absolute;
            font-family: Georgia, Times, Times New Roman, serif;
            width: 332px;
            height: 24px;
            top: 200px;
            left: 460px;
            padding-left: 5px;
            font-size: 20px;
            border: 1px solid #ffffff;
            background-color:#1567ed;
            color: #ffffff;
            text-align: center;
            border-collapse: collapse;">
    <tr>
        <th>Name</th>
        <th>Time</th>
    </tr>

    <tr>
        <td>Stuff</td>
        <td>1:00</td>
    </tr>

</table>

我还需要添加什么其他CSS，以使单元格在单元格周围具有边框，或进行垂直排列以区分两个标题。

类似的事情，玩家的名字放在名称标题下，完成游戏所需的时间在时间​​标题下。

Answer 1

我已经用一个桌子和两个柱子做了一个最小的例子，您应该根据情况进行调整。

table {padding:0; margin:0; border-collapse: collapse;}
td div, th div{
    border:solid black 1px;
    border-radius:6px;
    margin: 0 10px
}
tr td:first-child {border-right: black solid 1px}

<table>
<tr><th colspan="2"><div>Title</div></th></tr>
<tr><td><div>cell</div></td><td><div>cell</div></td></tr>
</table>

Answer 2

Table Borders

如果您想在桌子上设置圆角，则需要将border-collapse更改为默认值separate或将其全部删除。之后，您将可以应用border-radius。该演示具有响应能力，看起来几乎值得移动。我还有很多其他问题可以解决，但我认为，在阅读了此演示和上面的链接后，您应该可以解决您的模糊问题。

---

演示

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font: 700 calc(16px + 0.5vw)/calc(1.1em + 0.5vw) Georgia;
  margin: .5em;
}

body {
  overflow-x: auto;
  overflow-y:scroll;
  background: url(https://i.ibb.co/rvL6BRK/9LGTz.png) no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
  text-align: center;
}

main {
  margin: 0 auto;
  width: 96vw;
  height: auto;
}

header {
  margin: 10px auto 0;
}

h1 {
  font-variant:small-caps;
  letter-spacing: 0.5vw;
  font-size: calc(20px + 1.5vw);
  margin: .5em 0
}

h1 b:first-of-type {
 font-size: 1.15em;
 vertical-align: bottom;
 line-height:0.75;
}

h1 b:last-of-type{
  font-size: 1.5em;
  font-weight: 500;
  line-height:0.75;
 vertical-align: sub;
}

table {
  font-size: 1rem;
  width: 60vw;
  min-width: 320px;
  height: auto;
  padding:0;
  table-layout: fixed;
  border-right: 3px ridge #fff;
  border-left: 3px ridge #fff;
  border-bottom: 3px ridge #fff;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  border-spacing: 0px;
  margin: 0 auto 20px;
}

thead tr:first-of-type {
  padding: 0;
}

caption {
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-variant:small-caps;
  padding:0;
  border-top: 3px ridge #fff;
  border-right: 3px ridge #fff;
  border-left: 3px ridge #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 60vw;
  min-width:320px;
}

td {
font-weight: 400;
}

thead tr:nth-of-type(2) th:first-of-type {
  border-right: 0.5px inset #fff;
  border-bottom: 1px inset #fff;
}

thead tr:nth-of-type(2) th:last-of-type {
  border-left: 0.5px inset #fff;
  border-bottom: 1px inset #fff;
}

tbody tr td:first-of-type {
  border-right: 0.5px inset #fff;
  border-bottom: 1px inset #fff;
}

tbody tr td:last-of-type {
  border-left: 0.5px inset #fff;
  border-bottom: 1px inset #fff;
}

tbody tr:last-of-type td {
  border-bottom: 0px none transparent;
}

<main>
<header>
<h1><b>N</b>octurnal Neighbor<b>s</b></h1>
</header>
<table>
  <caption>Leader Board</caption>
  <thead>
    <tr><th colspan='2'></th></tr>
    <tr><th>Name</th><th>Time</th></tr>
  </thead>
  <tbody>
    <tr><td>Player One</td><td>1:00</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  </tbody>
</table>
</main>

Answer 3

我认为您应该标识两个具有不同ID的列，然后将右侧的列的左侧边框设置为所需的任何值，但不要忘记设置右侧边框的宽度左侧的列设置为0px，因为如果您不这样做，则如果该列具有相同的值，则该列将被重复；否则，将被添加。

希望它能对您有所帮助。