How do I bottom-align bars in a CSS vertical bar chart?
Question
I am experimenting with two different bar charts I created using HTML and CSS: horizontal and vertical. How do I move the bars in my vertical bar chart from the center to the bottom?
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>
My original JSFiddle: https://jsfiddle.net/jkantner/b7aa2yu1/
4 answers
solution1
2 2015-08-26 15:34:43
Just add
.stat-table-vert td {
vertical-align:bottom;
}
solution2
1 ACCPTED 2015-08-26 15:38:02
Adding vertical-align: bottom to the containing TD seems to do it if I'm understanding you correctly.
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
vertical-align: bottom;
}
solution3
0 2015-08-26 15:41:51
Add flowing css
.stat-table-vert td {
position: relative;
}
.stat-table-vert .bar.vert-bar{
position: absolute;
bottom: 0;
width: 100%;
}
or
add
.stat-table-vert td {
vertical-align:bottom;
}
solution4
0 2015-08-26 15:43:52
Using vertical-align: bottom; or vertical-align: baseline on the td element should fix the issue.
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; vertical-align: baseline; } .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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to bottom-align these divs?
How can I bottom-align this btn-group using only css?
How do I bottom-align grid elements in bootstrap fluid layout
bottom-align a link in a div
How do I add a bottom border under contact in my vertical navigation bar using css?
How do I get rid of double vertical scroll bars in CSS?
Bottom-align text in a flex item
Center and bottom-align flex items
How do I draw a vertical line on a horizontal bar chart with ChartJS?
How can I position bars of a bar chart vertically so they all sit at the bottom of container?
Related Tags