'Unclosed lateral HTML table border

Is it possible to have the side borders of HTML tables like this: enter image description here

A vertical line that is not connected to the top and bottom of the table.

htmlcsshtml-table


Solution 1:[1]

You can try this :

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prakash Solanki

Related Questions