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

How to prevent table cells from resizing upon adding text

本文关键字：调整 文本 添加 何防止 表格 单元格      更新时间：2023-09-26

我有以下表格(实际较大，但为了简单起见):

<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;

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

你可以为你的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;
    }
相关文章：