如何让HTML/CSS按钮位于隐藏表格上方并实现表格初始隐藏

你的代码存在几个关键问题，导致出现你提到的两个现象：

核心问题点 #

1. 按钮位置错误：你把按钮的HTML代码写在了表格之后，而且所有内容都嵌套在<pre>标签里——这个标签是用来展示预格式化文本的，里面的HTML标签会被当成纯文本解析，根本不会作为页面元素正常渲染，这也是按钮和表格显示异常的主要原因。
2. 表格初始未隐藏：你定义了.content类但没用到表格上，而且表格默认是显示状态，JS逻辑是基于元素的style.display属性判断，但初始时这个属性为空，所以第一次点击才会切换显示。

修正后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Report</title>
    <style type="text/css">
      .body_foreground {
        color: #000000;
      }

      .body_background {
        background-color: #EEEEEE;
      }

      /* 初始隐藏表格 */
      #environment {
        display: none;
      }
    </style>
  </head>
  
  <body class="body_foreground body_background" style="font-size: normal;">
    <h1>html_report</h1>
    <!-- 把按钮放在表格上方 -->
    <div>
      <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" />
    </div>
    <table id="environment">
      <tr>
        <td>Base Version</td>
        <td>6.0.1</td>
      </tr>
      <tr>
        <td>Extended Version</td>
        <td>5.14.0</td>
      </tr>
      <tr>
        <td>Project Version</td>
        <td>36</td>
      </tr>
    </table>

    <script type="text/javascript">
      function toggle_env() {
        var content = document.getElementById("environment");
        // 优化判断逻辑，兼容初始状态
        if (content.style.display === "block") {
          content.style.display = "none";
          document.getElementById("env_button").value = "Show Environment";
        } else {
          content.style.display = "block";
          document.getElementById("env_button").value = "Hide Environment";
        }
      }
    </script>
  </body>
</html>

具体修改说明 #

• 移除了多余的<pre>标签，让HTML元素正常渲染。
• 将按钮代码移到表格之前，实现按钮在表格上方的需求。
• 通过CSS给#environment设置display: none，确保页面加载时表格默认隐藏。
• 修复了错误的<h1>标签（去掉了多余的s），并删除了无匹配的</div>标签。
• 优化了JS函数，切换表格显示状态的同时修改按钮文字，提升交互体验。

内容的提问来源于stack exchange，提问作者Jeff Wright