如何防止表格單元格調整大小時添加文本

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