HTML表格数据排版异常求助：数据溢出表格且未对齐

我在制作HTML表格插入数据时，遇到了数据未在表格内排列、溢出边框且布局混乱的问题，希望实现表格标题与对应数据对齐，表格内数据排列规整。

原HTML代码 #

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Package Tracking - Admin</title></head><body><h1>Admin Page</h1><label for="packageIdAdmin">Package ID:</label><input type="text" id="packageIdAdmin"><br><label for="status">Status:</label><input type="text" id="status"><br><label for="location">Location:</label><input type="text" id="location"><br><label for="estimatedDelivery">Estimated Delivery:</label><input type="text" id="estimatedDelivery"><br><button onclick="addPackage()">Add Package</button><br><br><h2>List of Saved Packages</h2><button onclick="viewPackageList()">View Package List</button><div id="packageList"></div><script src="admin.js"></script></body></html>

原JavaScript代码 #

// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
    const packageData = {
      status: status,
      location: location,
      estimatedDelivery: estimatedDelivery
    };
    localStorage.setItem(packageId, JSON.stringify(packageData));
  }
  
  // Function to retrieve package data
  function retrievePackage(packageId) {
    const storedPackage = localStorage.getItem(packageId);
    return storedPackage ? JSON.parse(storedPackage) : null;
  }
  
  // Function to add package by admin
  function addPackage() {
    const packageId = document.getElementById("packageIdAdmin").value.trim();
    const status = document.getElementById("status").value.trim();
    const location = document.getElementById("location").value.trim();
    const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
  
    if (packageId && status && location && estimatedDelivery) {
      storePackage(packageId, status, location, estimatedDelivery);
      alert("Package added successfully!");
    } else {
      alert("Please fill in all fields.");
    }
  }
  
  // Function to view list of saved packages by admin
  function viewPackageList() {
    const packageListDiv = document.getElementById("packageList");
    packageListDiv.innerHTML = "";
  
    packageListDiv.innerHTML += "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";
  
    for (let i = 0; i < localStorage.length; i++) {
      const packageId = localStorage.key(i);
      const packageData = JSON.parse(localStorage.getItem(packageId));
  
      packageListDiv.innerHTML += `
        <tr>
          <td>${packageId}</td>
          <td>${packageData.status}</td>
          <td>${packageData.location}</td>
          <td>${packageData.estimatedDelivery}</td>
          <br>
        </tr>
      `;
    }
  
    packageListDiv.innerHTML += "</table>";
  }

问题根源 #

1. 无效HTML标签：在表格的<tr>行标签内插入了<br>换行标签，表格的行结构不允许包含此类标签，直接破坏了表格的DOM结构，导致浏览器渲染错乱。
2. 多次DOM拼接：反复使用innerHTML +=拼接表格内容，不仅容易引入格式问题，还会多次触发DOM重绘，降低渲染效率。

修复方案 #

1. 移除<tr>内的<br>标签，保证表格DOM结构符合HTML规范。
2. 优化HTML构建方式：先通过字符串变量拼接完整的表格内容，再一次性赋值给innerHTML，减少DOM操作次数，避免格式错误。

修改后的JavaScript代码 #

// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
    const packageData = {
      status: status,
      location: location,
      estimatedDelivery: estimatedDelivery
    };
    localStorage.setItem(packageId, JSON.stringify(packageData));
  }
  
  // Function to retrieve package data
  function retrievePackage(packageId) {
    const storedPackage = localStorage.getItem(packageId);
    return storedPackage ? JSON.parse(storedPackage) : null;
  }
  
  // Function to add package by admin
  function addPackage() {
    const packageId = document.getElementById("packageIdAdmin").value.trim();
    const status = document.getElementById("status").value.trim();
    const location = document.getElementById("location").value.trim();
    const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
  
    if (packageId && status && location && estimatedDelivery) {
      storePackage(packageId, status, location, estimatedDelivery);
      alert("Package added successfully!");
    } else {
      alert("Please fill in all fields.");
    }
  }
  
  // Function to view list of saved packages by admin
  function viewPackageList() {
    const packageListDiv = document.getElementById("packageList");
    // 先构建完整的表格字符串
    let tableHtml = "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";
  
    for (let i = 0; i < localStorage.length; i++) {
      const packageId = localStorage.key(i);
      const packageData = JSON.parse(localStorage.getItem(packageId));
  
      tableHtml += `
        <tr>
          <td>${packageId}</td>
          <td>${packageData.status}</td>
          <td>${packageData.location}</td>
          <td>${packageData.estimatedDelivery}</td>
        </tr>
      `;
    }
  
    tableHtml += "</table>";
    // 一次性赋值给innerHTML
    packageListDiv.innerHTML = tableHtml;
  }

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