rescaling div inside a table cell - html

Question

I'm trying to add a simple upvote/downvote counter into each row of a table. The counter is basically a container of divs shaped by css, that I'm inserting into a table cell. However, as is, the vote counter causes the row to balloon up. I trying resizing the top most div container but it only resizes the voting elements. The actual counter remains the same size. I'm new to css so I don't have a good sense of things yet. What is the best way to rewrite my CSS so I can easily scale the entire vote counter from the topmost level, without having to manually change all the sub-elements? This would be great if I wanted to stick this counter somewhere else on my site, not inside a table cell.
Here is the jsfiddle.
https://jsfiddle.net/havok2063/30way48v/
Very simple html describing the upvote/downvote counter.
<div class="vote circle">
<div class="increment up"></div>
<div class="increment down"></div>
<div class="count">8</div>
</div>
Here is the CSS.
.vote {
display: flex;
flex-direction: column;
position: relative;
width: 10rem;
height: 10rem;
}
.circle .up { border-radius: 10rem 10rem 0 0; }
.circle .down { border-radius: 0 0 10rem 10rem; }
.circle .count { border-radius: 50%; }
.up {
background: #4BC35F;
height: 50%;
margin-bottom: 0.25rem;
}
.down {
background: #C15044;
height: 50%;
}
.increment {
flex: 1 0 0;
text-align: center;
opacity: .5;
transition: 0.3s;
cursor: pointer;
}
.increment:hover {
opacity : 1;
}
.count {
position: absolute;
top: 0;
background: rgba(245,245,245,1.0);
border-radius: 0.1rem;
margin: 2.5rem;
width: 5rem;
font-size: 2.5rem;
font-weight: bold;
line-height: 5rem;
text-align: center;
box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
pointer-events: none;
}
html, body { height: 100%; }

Answer 1

Are you trying to make all the table cells the same height like this fiddle? https://jsfiddle.net/30way48v/2/
If so, add this to your css td{height: 100px;}

Answer 2

OK, here its is with smaller <td>'s
here is the fiddle https://jsfiddle.net/30way48v/3/
td{height: 50px;}
.vote {
display: flex;
flex-direction: column;
position: relative;
width: 5rem;
height: 5rem;
margin: 0px;
}
.circle .up { border-radius: 5rem 5rem 0 0; }
.circle .down { border-radius: 0 0 5rem 5rem; }
.circle .count { border-radius: 50%; }
.up {
background: #4BC35F;
height: 50%;
margin-bottom: 0.25rem;
}
.down {
background: #C15044;
height: 50%;
}
.increment {
flex: 1 0 0;
text-align: center;
opacity: .5;
transition: 0.3s;
cursor: pointer;
}
.increment:hover {
opacity : 1;
}
.count {
position: absolute;
top: 0;
background: rgba(245,245,245,1.0);
border-radius: 0.1rem;
margin: 1.45rem;
width: 2rem;
font-size: 2.5rem;
font-weight: bold;
line-height: 2rem;
text-align: center;
box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
pointer-events: none;
&.upvoted { color: #4BC35F; }
&.downvoted { color: #C15044; }
}
html, body { height: 100%; }