为什么max-height不适用于表？

Question

我希望表的父容器根据表的高度进行扩展。 我试过设置height:auto; 到父容器但它没有用。

我的目标是保持桌子的形状为正方形，并根据桌子的高度扩展容器的高度。
以下是我尝试的内容：

HTML

<div class="jumbotron playground" style="background-color: #1b6d85;">
    <div class="boardContainer" style="background-color: #2b542c;">
        <table id="boardGrid" class="table table-bordered">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

CSS

.playground {
    margin-top: -20px;
    margin-bottom: 0;
    height: auto;
}
.boardContainer {
    height: auto;
}
#boardGrid {
    margin: 0 auto;
    max-width: 620px;
    max-height: 620px;
}
#boardGrid td {
    width: 33.33%;
    height: 33.33%;
    vertical-align: middle;
    cursor: pointer;
}
.comments {
    height: 200px;
}
@media (min-width: 768px) {
    .boardContainer {
        margin-left: 15%;
        margin-right: 15%;
    }
}
@media (min-width: 992px) {
    .scoreboard {
        position: fixed;
        right: 10px;
    }
    .playground {
        margin-top: 35px;
    }
    .boardContainer {
        margin-left: 20%;
        margin-right: 20%;
    }
}
@media (min-width: 1200px) {
    .boardContainer {
        margin-left: 25%;
        margin-right: 25%;
    }
}

Answer 1

这对你有用吗？ https://jsfiddle.net/wb4ovbsb/2/

.playground {
    margin-top: 0px;
    margin-bottom: 0;
    height: auto;
}
.boardContainer {
    height: 0;
    width:100%;
    padding-bottom:100%;
    margin: auto;
    position:relative;
}
#boardGrid {
    margin: 0 auto;
    max-width: 620px;
    max-height: 620px;
}
#boardGrid td {
    width: 33.33%;
    height: 33.33%;
    vertical-align: middle;
    cursor: pointer;
}
.comments {
    height: 200px;
}
.strecher{position:absolute; top:0; bottom: 0; right:0;left:0;}
table{width:100%; text-align:center; height:100%; vertical-align: middle; }
@media (min-width: 768px) {
    .boardContainer {
        width: 70%;
        padding-bottom:70%;
    }
}
@media (min-width: 992px) {
    .scoreboard {
        position: fixed;
        right: 10px;
    }
    .playground {
        margin-top: 35px;
    }
    .boardContainer {
        width: 60%;
        padding-bottom:60%;
    }
}
@media (min-width: 1200px) {
    .boardContainer {
        width: 50%;
        padding-bottom:50%;
    }
}*emphasized text*