Style HTML table with vertical line - css

Question

I want to draw this using HTML5 and CSS:
I created the vertical line by using
.Column-VerticalLine {
border-right: thin solid #A9A9A9;
}
with this HTML:
<div class="col-sm-2 Column-VerticalLine">
<div></div>
<div style="font-weight: bold;"> Messeages </div>
<div style="font-weight: bold;"> Messeage Body bytes </div>
<div style="font-weight: bold;"> Process Memory </div>
</div>
<div class="col-sm-1">
<div style="font-weight: bold;"> Total </div>
<div> 0 </div>
<div> 0B</div>
<div> 21KB</div>
</div>
But the appearance is not correct, as you can see:
How can I fix this and get the result I desire?

Answer 1

Why not use a table?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.test{
width:160px ;
border-right: 2px solid;
}
<table>
<tr>
<th></th>
<th>Total</th>
<th>Ready</th>
<th>Unacked</th>
</tr>
<tr>
<td class="test">Messages</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="test">Messeage Body bytes</td>
<td>0B</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="test">Process Memory</td>
<td>21KB</td>
<td></td>
<td></td>
</tr>
</table>

Answer 2

.flex {
display: flex;
text-align: right;
}
.vertical {
flex-direction: column;
margin: 0 1em;
}
.vertical div:first-child {
font-weight: bold;
}
.outer {
align-items: flex-end;
}
.outer > div:first-child {
border-right: 1px solid black;
padding-right: 1em;
margin-right: .5em;
}
.col {
margin: 0 .5em;
}
.col div:first-child, .outer > div:first-child {
font-weight: bold;
}
<div class="outer flex">
<div class="col">
<div>Messages</div>
<div>Message Body bytes</div>
<div>Process Memory</div>
</div>
<div class="flex">
<div class="col">
<div>Total</div>
<div>0</div>
<div>0B</div>
<div>21KB</div>
</div>
<div class="col">
<div>Ready</div>
<div>0</div>
<div>0B</div>
<div></div>
</div>
</div>
</div>
Hi, here is a solution using flexbox, though this could also be achieved using a table, since it is tabular data.

Answer 3

.Column-VerticalLine {
border-right: thin solid #A9A9A9;
margin-top: 1.2em;
}
.colum2 {
text-align: right;
}
Css and html
<div class="col-sm-2 Column-VerticalLine">
<div></div>
<div style="font-weight: bold;"> Messeages </div>
<div style="font-weight: bold;"> Messeage Body bytes </div>
<div style="font-weight: bold;"> Process Memory </div>
</div>
<div class="col-sm-1 colum2">
<div style="font-weight: bold;"> Total </div>
<div> 0 </div>
<div> 0B</div>
<div> 21KB</div>
</div>
On the JSFiddle
is solution of your problem with common margin. If you want, you can use table tags too. I will give you the docs of it