未闭合的横向 HTML table 边框

Question

HTML table 的边框是否可以像这样：

没有连接到 table 的顶部和底部的垂直线。

Answer 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>

Answer 2

.table {
  background-color: #272727;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.table__body-row {
  height: 41px;
  border-bottom: 1px solid #000000;
}

.table__body-row.filled {
  background: #191919;
}

.table__body-cell {
  font-size: 14px;
  color: #FFFFFF;
  border: none;
}

.table__header {
  background: #000000;
}

.table__header-row {
  height: 40px;
}

.table__header-cell {
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: left;
  padding: 0 16px 0 16px;
}

.table__cell-body {
  border-right: 1px solid #000000;
  padding: 0 10px 0 10px;
  min-height: 17px;
}

.table__body-cell:last-of-type .table__cell-body {
  border-right: none;
}

<table class="table">
  <thead class="table__header">
    <tr class="table__header-row">
      <th class="table__header-cell">
        Header 1
      </th>
      <th class="table__header-cell">
        Header 2
      </th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <tr class="table__body-row">
      <td class="table__body-cell">
        <div class="table__cell-body"></div>
      </td>
      <td class="table__body-cell">
        <div class="table__cell-body"></div>
      </td>
    </tr>
  </tbody>

</table>

这可以使用带边框的嵌套 div 来完成。请查看代码段。

未闭合的横向 HTML table 边框

Unclosed lateral HTML table border

html

css

html-table