如何让HTML表格自动铺满浏览器窗口？新手技术咨询

嗨，作为刚接触HTML表格的新手，遇到这个自适应宽度的问题很正常～你只需要在HTML的<head>中添加一段CSS样式就能搞定，具体方案如下：

核心解决方案 #

在你的<head>标签内插入<style>块，通过CSS设置表格的宽度为100%，让它自动铺满浏览器窗口，同时可以灵活控制两列的宽度分配：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
  <!-- 新增的CSS样式 -->
  <style>
    /* 让表格铺满整个可用宽度 */
    table {
      width: 100%;
      border-collapse: collapse; /* 可选：合并表格边框，视觉更整洁 */
    }

    /* 可选：自定义两列宽度比例，比如第一列占30%，第二列占70% */
    /* 如果不需要固定比例，删掉下面这两行即可，表格会根据内容自动分配宽度 */
    table td:nth-child(1), table th:nth-child(1) {
      width: 30%;
    }
    table td:nth-child(2), table th:nth-child(2) {
      width: 70%;
    }
  </style>
</head>

关键说明 #

1. width: 100%是核心：它让表格自动填充父容器的宽度（这里父容器就是浏览器窗口的body区域），不再局限于固定宽度。
2. 列宽控制：如果不需要固定比例，只保留table { width: 100%; }即可，表格会根据每列的内容自动调整宽度；如果需要固定比例，就用nth-child选择器给对应列设置宽度百分比。
3. border-collapse: collapse是可选优化，能让表格的边框看起来更紧凑美观，不影响自适应功能。

这样修改后，你的传感器信息表格就能自动适配不同浏览器窗口的宽度啦～

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