自动计算表格问题求助：列宽修改、合并表头及一行三表实现

问题1：第2、3列宽度无法修改 #

当前列宽被输入框和表格默认布局干扰，通过以下调整解决：

• 给对应列的td和th统一设置固定宽度，同时限制输入框宽度为100%，避免撑大单元格。
• 同步修改CSS中列相关样式，确保表头和数据列宽度一致。

问题2：添加跨列合并表头 #

在每个表格最顶部插入一行，包含一个colspan等于表格总列数（5列）的表头单元格，显示表格序号。

问题3：一行容纳3个表格 #

给包裹表格的行容器添加Flex布局，设置自动换行和间距，同时调整表格宽度为合理值，确保一行能放下3个表格。

修改后的完整代码 #

JavaScript #

function createTables() {
  const plateCount = document.getElementById("kolonnu skaits").value;
  const tableContainer = document.getElementById("table-container");
  tableContainer.innerHTML = "";

  let tableRow = document.createElement("div");
  tableRow.classList.add("table-row");
  tableContainer.appendChild(tableRow);

  for (let i = 1; i <= plateCount; i++) {
    const table = document.createElement("table");
    table.style.width = "30%";
    
    // 添加跨列表头
    const mainHeaderRow = document.createElement("tr");
    mainHeaderRow.innerHTML = `<th colspan="5" class="main-header">${i}</th>`;
    table.appendChild(mainHeaderRow);

    const headerRow = document.createElement("tr");
    headerRow.innerHTML = `
      <th></th>
      <th class="paraugs">Paraugs</th>
      <th class="koncentracija">[C]</th>
      <th>DNS</th>
      <th>TE</th>
    `;
    table.appendChild(headerRow);

    for (let j = 1; j <= 8; j++) {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>${j}</td>
        <td class="paraugs"><input type="text" placeholder="" class="full-width-input"></td>
        <td class="koncentracija"><input type="number" placeholder="" id="concentration-${i}-${j}" class="no-arrows full-width-input"></td>
        <td id="DNS-${i}-${j}">0</td>
        <td id="TE-${i}-${j}">0</td>
      `;
      table.appendChild(row);
    }

    // 每3个表格换行
    if (i % 3 === 0) {
      tableRow = document.createElement("div");
      tableRow.classList.add("table-row");
      tableContainer.appendChild(tableRow);
    }
    tableRow.appendChild(table);

    // 计算逻辑保留
    for (let j = 1; j <= 8; j++) {
      const concentrationInput = document.getElementById(`concentration-${i}-${j}`);
      concentrationInput.addEventListener('input', () => {
        const DNSCell = document.getElementById(`DNS-${i}-${j}`);
        const TECell = document.getElementById(`TE-${i}-${j}`);
        const concentration = concentrationInput.value;
        DNSCell.innerText = concentration > 0 ? `=${parseFloat(80 / concentration).toFixed(3)}` : "0";
        TECell.innerText = concentration > 0 ? `=${parseFloat(5 - 80 / concentration).toFixed(3)}` : "0";
      });
    }
  }
}

CSS #

/* 表格行容器：Flex布局实现自动排列换行 */
.table-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
}

/* 固定第2、3列宽度 */
th.paraugs, td.paraugs,
th.koncentracija, td.koncentracija {
  width: 120px;
}

/* 跨列表头样式 */
.main-header {
  text-align: center;
  font-size: 1.2em;
  background-color: #f0f0f0;
}

/* 输入框占满单元格宽度 */
.full-width-input {
  width: 100%;
  box-sizing: border-box;
}

body {
  background-color: lightblue;
  padding: 20px;
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

HTML #

<h1>Kolonnu skaits</h1>
<input type="number" id="kolonnu skaits" value="3" min="1">
<button onclick="createTables()">Izveidot</button>
<div id="table-container"></div>

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