JavaScript, td size always change – Blancer.com Tutorials and projects

I am writing a simple program that includes table and td’s.
In the program when you press q the number one appears in a td.
but when it happens the td width suddenly change.
so my question is how to stop it?
here is the code:

<html>
<body>
    <table border = "1">
        <tr>
            <td id = "td1"></td>
            <td id = "td2"></td>
        </tr>
    </table>
    <style>
        table {
            height: 400px;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            font-size:25px;
        }
    </style>
</head>
<head>
    <script>
        document.addEventListener("keydown", function(e){
            if (e.key == "q") {
                document.getElementById("td1").innerHTML = "1";
            }
        });
    </script>
</head>