JavaScript, td size always change-CodePudding

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>

CodePudding user response：

<html>
<head>
    <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;
        }
        
        td {
          width: 50%;
          }
          
    </style>
</head>

  <body>
      <script>
          document.addEventListener("keydown", function(e){
              if (e.key == "q") {
                  document.getElementById("td1").innerHTML = "1";
              }
          });
      </script>
  </body>
  
</html>

use this code

CodePudding user response：

you can add the following property to your css definition

table-layout: fixed;

<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;
            table-layout: fixed;
        }
    </style>
</head>
<head>
    <script>
        document.addEventListener("keydown", function(e){
            if (e.key == "q") {
                document.getElementById("td1").innerHTML = "1";
            }
        });
    </script>
</head>