HTML表（Bootstrap）不成比例地缩放

Question

我在网站上使用bootstrap来获取一些内容。事实是，在创建表时，bootstrap正在运行我的内容。注意：当我单击表格中的一行时，将显示图像或数字（JS）。

以下是该表现在的样子：

当我点击某些内容时会发生这种情况。我希望我的桌子总是这样（平方，适合屏幕）：

如果出现图像，表格将缩放...问题是单元格内容不正确地缩放：

有没有办法让方形单元适应自举响应？或者，如有必要，禁用它？我已经尝试了很多例子，已经在这里丢失了大约1个小时。

内部CSS：

td {
    height: 30px; /* already tried changing values */
    width: 30px; /* doesn't even get squared */
    /* shadow stuff here */
    border-radius: 2px;
    /* background stuff here */
}

table {
    border-collapse: separate;
    border-spacing: 3px;
    width: auto;
}

HTML

<div class="jumbotron" id="game-container">
    <center>
        <div class="col-md-12">
            <table class="table table-nonfluid" id="game"></table>
        </div>
    </center>
    <span id="minutes">00</span>:<span id="seconds">00</span>
</div>

编辑：使用行高。