JavaScript，td 大小总是改变答案

【问题标题】：JavaScript, td size always changeJavaScript，td 大小总是改变
【发布时间】：2022-01-25 02:21:50
【问题描述】：

我正在编写一个包含 table 和 td 的简单程序。在程序中，当您按下q 时，数字一出现在 td 中。但是当它发生时，td 宽度会突然改变。所以我的问题是如何阻止它？这是代码：

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

【问题讨论】：

使用css中的width和max-width来修复td大小

标签： javascript html css html-table css-tables

【解决方案1】：

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

使用此代码

【讨论】：

【解决方案2】：

您可以将以下属性添加到您的 css 定义中

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>

【讨论】：