How to prevent table cells from resizing upon adding text

I have the following table (larger in reality, but just for simplicity):

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


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



In my Javascript, I add a number/string to a specific table cell's innerHTML.

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


When I do this it causes all the cells to resize, while the cell to which I added the text is the largest. The table size stays the same.
I would like each cell's size to stay the exact same, even when adding text to it.

1 Answer
1

You can set a fixed width for your 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;



table-layout

fixed

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.