Currently, I am exploring the functionality of two distinct bar charts that I designed using HTML and CSS: one horizontal and the other vertical. Is there a way to shift the bars in my vertical bar chart from the center down to the bottom?
https://i.sstatic.net/291Di.png
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Global */
.stat-table-horz, .stat-table-vert {
border-collapse: collapse;
}
.bar {
background: #0c0;
}
/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
border-top: 1px solid #090;
border-bottom: 1px solid #090;
padding: 0;
width: 240px;
}
.stat-table-horz td .horz-bar {
height: 30px;
}
/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
padding: 5px;
}
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
}
.stat-table-vert td .vert-bar {
}<body>
<table class="stat-table-horz">
<tr>
<td>Health</td>
<td>
<!-- First bar -->
<div class="bar horz-bar" style="width: 10%;"></div>
</td>
</tr>
<tr>
<td>Attack</td>
<td>
<!-- Second bar -->
<div class="bar horz-bar" style="width: 90%;"></div>
</td>
</tr>
<tr>
<td>Speed</td>
<td>
<!-- Third bar -->
<div class="bar horz-bar" style="width: 60%;"></div>
</td>
</tr>
</table>
<br>
<table class="stat-table-vert">
<tr>
<td>
<!-- First bar -->
<div class="bar vert-bar" style="height: 10%;"></div>
</td>
<td>
<!-- Second bar -->
<div class="bar vert-bar" style="height: 90%;"></div>
</td>
<td>
<!-- Third bar -->
<div class="bar vert-bar" style="height: 60%;"></div>
</td>
</tr>
<tr>
<td>Health</td>
<td>Attack</td>
<td>Speed</td>
</tr>
</table>
</body>Link to my original JSFiddle for reference: https://jsfiddle.net/jkantner/b7aa2yu1/