javascript - 如何防止表格单元格在添加文本时调整大小

Question

我有下表（实际上更大，但只是为了简单起见）：

<div>
   <table id="gametable">
        <tr><td>1</td> <td>2</td></tr>
        <tr><td>3</td> <td>4</td></tr>
        <tr><td>5</td> <td>6</td></tr>
    </table>
</div>

和 CSS：

        #gameTable {
        table-layout:fixed;
        position:absolute;
        height:640px;
        width:640px;
        margin-left:31%;
        margin-top:8%;
        }

        div {
        white-space: nowrap;
        overflow: hidden;
        }


        td {
        cursor: pointer;
        background-color: rgb(150,150,150);
        box-shadow: 3px 3px 1px #888888;
        text-align:center;
        font-weight:bold;   
        padding:0px;
        }

在我的 Javascript 中，我将一个数字/字符串添加到特定表格单元格的 innerHTML。

        table.rows[x].cells[y].innerHTML = mines;

当我这样做时，它会导致所有单元格调整大小，而我添加文本的单元格是最大的。桌子大小保持不变。我希望每个单元格的大小保持完全相同，即使在向其中添加文本时也是如此。

Answer 1

您可以为 td 设置固定宽度：

td {
 width: 100px;
 cursor: pointer;
 background-color: rgb(150,150,150);
 box-shadow: 3px 3px 1px #888888;
 text-align:center;
 font-weight:bold;   
 padding:0px;
    }