rescaling div внутри ячейки таблицы

Question

Я пытаюсь добавить простой счетчик upvote/downvote в каждую строку таблицы. Счетчик в основном представляет собой контейнер divs, сформированный css, который я вставляю в ячейку таблицы. Однако, как есть, счетчик голосов заставляет строку подниматься вверх. Я пытаюсь изменить размер верхнего контейнера div, но он только изменяет размеры элементов голосования. Фактический счетчик остается того же размера. Я новичок в css, поэтому у меня пока нет хорошего чувства. Каков наилучший способ переписать мой CSS, чтобы я мог легко масштабировать весь счетчик голосов с самого верхнего уровня без необходимости вручную изменять все подэлементы? Это было бы здорово, если бы я захотел придерживаться этого счетчика где-то еще на моем сайте, а не внутри ячейки таблицы.

Вот jsfiddle. https://jsfiddle.net/havok2063/30way48v/

Очень простой html, описывающий счетчик upvote/downvote.

<div class="vote circle"> 
    <div class="increment up"></div> 
    <div class="increment down"></div> 

    <div class="count">8</div> 
</div> 

Это 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

Вы пытаетесь сделать все ячейки таблицы одинаковыми по высоте, как эта скрипка? https://jsfiddle.net/30way48v/2/

Если да, то добавьте в ваш CSS td{height: 100px;}

Answer 2

ОК, здесь его есть с меньшими <td> «ы здесь скрипку 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%; }