ARTICLE AD BOX
I try to display a table in the same manner as it would be shown in a terminal program:
body {
width: 100%;
font-family: "Fira Code", "Consolas", "Courier New", monospace;
}
table {
border-right: 1px dashed;
border-collapse: collapse;
}
td,th {
border: 1px dashed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</tfoot>
</table>
</body>
</html>
Usually tables in a cli/terminal program are shown like this:
+----------+---------+-----------+ | col1 | col2 | col3 | +----------+---------+-----------+ | v1 | 3.0.0 | 1 | | v2 | 1.0.2 | 1 | | v3 | 1.0 | 1 | | v4 | 3.3.1 | 1 | +----------+---------+-----------+How I can place the + character to the place borders meet? I want to use css approach if possible instead of js.
As you can see I only managed to just place a dashed border, do you know how can do this?
