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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (73)

我有下表(实际上更大,但为了简单起见):

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

扫码关注云+社区

领取腾讯云代金券