Thiết kế website giá rẻ

Question

<!DOCTYPE html>
<html lang="lv">
  <head>

    <title>MLPA</title>
    <style>
      table {
        border-collapse: collapse;
        display: inline-table; /* added to make tables inline */
      }
      th, td {
        border: 1px solid #000000;
        padding: 8px;
        text-align: left;
      }
      .no-scroll {
        overflow: hidden;
        width: 50px; /* or any other fixed width */
      
      }

    </style>
  </head>
  <link rel="stylesheet" href="mlpacss.css">

  <body>
    <h1>Kolonnu skaits</h1>
    <input type="number" id="kolonnu skaits" value="1">
    <button onclick="createTables()">Izveidot</button>
    <div id="table-container"></div>
    <script>
      function createTables() {
        const plateCount = document.getElementById("kolonnu skaits").value;
        const tableContainer = document.getElementById("table-container");
        tableContainer.innerHTML = "";

        let tableRow = document.createElement("div"); // added to wrap tables in a row
        tableContainer.appendChild(tableRow);

        for (let i = 1; i <= plateCount; i++) {
          const table = document.createElement("table");
          table.style.width = "15%"; // added to make tables take 25% of the width
          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><input type="text" placeholder=""></td>
              <td><input type="number" placeholder="" id="concentration-${i}-${j}" class="no-arrows"></td>
              <td id="DNS-${i}-${j}">0</td>
              <td id="TE-${i}-${j}">0</td>
            `;
            table.appendChild(row);
          }

          if (i % 3 === 0) { // added to wrap every 4 tables in a new row
            tableRow = document.createElement("div");
            tableContainer.appendChild(tableRow);
          }
          tableRow.appendChild(table);

          // Add event listener to calculate DNA concentration and TE
          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";
            });
          }
        }
      }
    </script>
  </body>
</html>

And here is css code

body {
    background-color: lightblue;
  }
#DNS {
    overflow:hidden; /* Hides the vertical scrollbar */
    width: 100%; /* Ensures the input field takes up the full width of its container */
  }
  
  #DNS::-webkit-input-placeholder {
    text-overflow: ellipsis; /* Ensures the placeholder text is truncated if it overflows */
    white-space: nowrap; /* Ensures the placeholder text is displayed on a single line */
  }
  
  #DNS:-ms-input-placeholder {
    text-overflow: ellipsis; /* Ensures the placeholder text is truncated if it overflows */
    white-space: nowrap; /* Ensures the placeholder text is displayed on a single line */
  }
  
  #DNS::placeholder {
    text-overflow: ellipsis; /* Ensures the placeholder text is truncated if it overflows */
    white-space: nowrap; /* Ensures the placeholder text is displayed on a single line */
  }
  .no-arrows::-webkit-inner-spin-button,
  .no-arrows::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  th.paraugs, th.koncentracija {
    width: 15%
  }

I am not really a programmer, just creating this for fun (mostly using AI, because I have very little knowledge). I tried many ways to change the width of 2nd and 3rd column, but it won’t change. Also, if someone knows how to make one merged cell over table, please suggest me what to do. What I am trying to do is that first table contains 1 in merged cell, second contains 2 etc. I will add a photo of how I am trying to make it look.
image of how it looks in excel

Thiết kế website giá rẻ

Danh mục

I’m trying to create a table that will calculate values automatically. Everything works except I can’t change the width to fit 3 tables in one row