为什么最大高度不适用于表格？

Question

我希望 table 的父容器根据 table 的高度展开。我尝试将 height:auto; 设置为父容器，但没有用。

我的目标是将table形状保持在正方形并且根据table的高度扩展容器的高度].
以下是我尝试过的：

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*

为什么最大高度不适用于表格？

Why does max-height not work with tables?

html

css

twitter-bootstrap

twitter-bootstrap-3

css-tables