未闭合的横向 HTML 表格边框答案

【问题标题】：Unclosed lateral HTML table border未闭合的横向 HTML 表格边框
【发布时间】：2022-01-05 07:36:17
【问题描述】：

HTML 表格的侧边是否可以像这样：

一条不与表格顶部和底部相连的垂直线。

【问题讨论】：

【解决方案1】：

你可以试试这个：

body{
        background:grey;
}
table, th, td {
  border-top: 1px solid #fff;
  border-bottom : 1px solid #fff;
  border-collapse: collapse;
  text-align:center;
  padding:10px;
}
table 
{
    position:  absolute ;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:2px solid #fff;
}
td
{
    position:relative ;
}
td::after
{
    content:'';
    position:absolute ;
    height:70%;
    width:100%;
    left:0;
    top:7px;
    border-left:3px solid #fff;
}
td:nth-child(1)::after
{
  display:none;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table style="width:20%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

【讨论】：