Как в ячейке display:table-cell на всю ширину и высоту?

Question

[Лариса]

Вот зрительно проблема в редакторе

<div class="table">
    <div class="table__row">
        <div class="table__cell">
            <a href="#" class="table__link">
                Гастрономия
            </a>
        </div>
    </div>
</div>

.table {
            display: table;
            width: 50%;
        }

        .table__row {
            display: table-row;
            height: 88px;
        }

        .table__cell {
            display: table-cell;
            vertical-align: middle;
            background-color: #A4C639;

        }

        .table__link {
            color: #050505;
            font: 500 23px Arial;
            display: block;
            height: 100%;
            text-transform: uppercase;
            text-align: center;
            margin: 0;
            padding: 0;            
            background-color: #ccc;
        }

Comments

[Ankhena]

height: 100% для ячейки

[Лариса]

Ankhena, Вы уверены в результате?
если в код поставить, то ячейка схлопывается

[Ankhena]

Лариса,
ну потому что это было inherit, а не 100%

А почему не флексы?

Answer 1

[Евгений]

https://jsfiddle.net/2fk9x7bn/3/

Comments

[Лариса]

к сожалению в стиль нельзя вписать высоту фиксированную
на лету в .table__row прописываеся высчитываемая высота и при изменении экрана пересчитывается(

[Евгений]

https://jsfiddle.net/2fk9x7bn/27/

Answer 2

[Лариса]

костыльное решение проблемы

.table__link  {
 line-height: 88px;  
}

так как у нас высота вычисляется у ячейки на лету с постоянным перерасчетом, то это костыль
но ничего другого придумать не удается(

Comments

[Лариса]

проблема в том, что программист накостылил вычислять высоту на лету
меняется при резайзе тоже и в тег перезаписывается, но решение кривое(