绝对定位表格

Question

是否有某种方法可以将position: absolute;与display: table;的元素一起使用？

在下面的例子中，我认为该表将是100％宽和（100％ - 50px）高，但事实并非如此。相反，我必须将表包装在一个绝对定位的容器中，并使其100％宽和高。这感觉很愚蠢。为什么绝对定位表不起作用？有没有办法让它发挥作用？

html, body {
    min-height: 90%;
    min-width: 90%;
    height: 90%;
    width: 90%;
}

body {
    background-color: #333;
}

.table {
    display: table;
    border: 3px solid rebeccapurple;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
}

.cell {
    display: table-cell;
    height: 100%;
    width: 33%;
    border: 3px solid #f00;
    
}

.not-a-table {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background-color: rgba(0,200,0,.2);
}

<div class="table">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

<div class="not-a-table">&nbsp;</div>

Answer 1

在.table

中添加宽度和高度

.table{
   ....
    width: 100%;
    height: calc(100% - 50px);
}

具有display:table属性的元素无法在absolute定位中放置而不指定宽度和高度...需要使用display:block属性。