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

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