HTML/CSS/JS技术疑问：表格匹配、溢出处理及多问题求助

Hey Sara, let's work through each of your questions step by step with clear fixes and explanations:

1. Sync myTable1 size with myTable2, wrap overflow text, and add vertical scroll #

CSS absolutely supports both wrapping overflow text and vertical scrolling—you just need to combine the right properties:

• For text wrapping: Use overflow-wrap: break-word (or word-wrap: break-word for older browser compatibility) on table cells to force long strings to wrap instead of spilling over.
• For vertical scroll: Add overflow-y: auto to #myTable1 so it shows a scrollbar when content exceeds its fixed height.
• To keep sizes in sync: Instead of setting dimensions inside the loop, sync myTable1 with myTable2 once at the start of the function (and on page load) using offset dimensions for accuracy.

Here's the key CSS update for this:

#myTable1 {
  background: #EEEEEB;
  border: none;
  position: relative;
  overflow-y: auto; /* Enable vertical scroll */
}
#myTable2 {
  background: #EEEEEB;
  border: none;
  position: relative;
  table-layout: fixed; /* Lock table layout to prevent unexpected size shifts */
  width: 275px; /* Match your td width for consistency */
}
#myTable1 td, #myTable2 td {
  text-align: right;
  overflow-wrap: break-word; /* Force long text to wrap */
  width: 275px; /* Fixed cell width to avoid column expansion */
}

And adjust your JavaScript to sync sizes reliably:

function makeArr() { 
  var myTableDiv = document.getElementById("myTable1"); 
  var table2 = document.getElementById("myTable2");
  tableBody.innerHTML = ""; 

  // Sync sizes with myTable2 first
  myTableDiv.style.width = table2.offsetWidth + 'px';
  myTableDiv.style.height = table2.offsetHeight + 'px';

  for(var i=0;i<array.length;i++) { 
    var tr = document.createElement('TR'); 
    tableBody.appendChild(tr); 
    var td = document.createElement('TD') 
    td.width = '275'; 
    td.appendChild(document.createTextNode(String(array[i]))); 
    tr.appendChild(td); 
  }
  // Append the table once after the loop (not inside it!)
  myTableDiv.appendChild(table); 
}

// Sync sizes on page load too
window.onload = function() {
  var myTableDiv = document.getElementById("myTable1"); 
  var table2 = document.getElementById("myTable2");
  myTableDiv.style.width = table2.offsetWidth + 'px';
  myTableDiv.style.height = table2.offsetHeight + 'px';
};

2. Fix long string displaying as 666...0 #

The problem here is that JavaScript loses precision with extremely large numbers, and even though your array item is a string, there's a chance it's being coerced to a number accidentally. The fix is to explicitly convert the array item to a string before rendering it—we added String(array[i]) in the JS above to guarantee this.

Additionally, the overflow-wrap: break-word CSS property ensures the full string wraps instead of being truncated, so you'll see the entire text instead of a shortened, inaccurate number.

3. Prevent size/layout issues when myTable2's content grows #

To stop <th> content changes from breaking your layout, use table-layout: fixed on #myTable2 (we added this in the CSS). This locks the table's layout so column widths are determined by explicit settings, not dynamic content.

Add a fixed width to the <th> to match your table cells, and enable wrapping for long header text:

#myTable2 th {
  width: 275px;
  overflow-wrap: break-word; /* Wrap long header text instead of expanding the table */
}

4. Fix myTable1's missing scroll effect #

Your original code had two issues preventing scroll:

1. #myTable1 didn't have overflow-y: auto set (we added this in the CSS).
2. You were appending the table to myTableDiv inside the for loop, which added the table multiple times (once per array item!). Moving myTableDiv.appendChild(table) outside the loop fixes this.

With these changes, myTable1 will show a vertical scrollbar whenever its content exceeds the synced height.

5. Align tables left without float:left #

Use Flexbox on the parent .tables container—it's a modern, reliable alternative to floats for alignment. Update your CSS:

.tables {
  display: flex; /* Align child elements in a row */
  gap: 10px; /* Optional: Add space between the two tables */
  flex-wrap: nowrap; /* Keep tables side-by-side */
  width: fit-content; /* Prevent the container from stretching full width */
}
#myTable1, #myTable2{ 
  background: #EEEEEB; 
  border: none;
  flex-shrink: 0; /* Stop tables from being compressed */
}

Remove the float: left from both tables, and they'll stay aligned left, side-by-side, without overflowing the body.

Final Combined Code #

Here's all the updated code put together for easy implementation:

JavaScript

var array = [1,2,3,4,"666666666666666666666+3=123456678"]; 
var table = document.createElement('TABLE'); 
var tableBody = document.createElement('TBODY'); 
table.border = '0'; 
table.appendChild(tableBody); 
table.width = '100%'; /* Make table fill myTable1 */

function makeArr() { 
  var myTableDiv = document.getElementById("myTable1"); 
  var table2 = document.getElementById("myTable2");
  tableBody.innerHTML = ""; 

  // Sync sizes with myTable2
  myTableDiv.style.width = table2.offsetWidth + 'px';
  myTableDiv.style.height = table2.offsetHeight + 'px';

  for(var i=0;i<array.length;i++) { 
    var tr = document.createElement('TR'); 
    tableBody.appendChild(tr); 
    var td = document.createElement('TD') 
    td.width = '275'; 
    td.appendChild(document.createTextNode(String(array[i]))); 
    tr.appendChild(td); 
  }
  myTableDiv.appendChild(table); 
}

// Sync sizes on page load
window.onload = function() {
  var myTableDiv = document.getElementById("myTable1"); 
  var table2 = document.getElementById("myTable2");
  myTableDiv.style.width = table2.offsetWidth + 'px';
  myTableDiv.style.height = table2.offsetHeight + 'px';
};

CSS

.tables {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  width: fit-content;
}
#myTable1 {
  background: #EEEEEB;
  border: none;
  position: relative;
  overflow-y: auto;
}
#myTable2 {
  background: #EEEEEB;
  border: none;
  position: relative;
  table-layout: fixed;
  width: 275px;
}
#myTable1 td, #myTable2 td, #myTable2 th {
  text-align: right;
  overflow-wrap: break-word;
  width: 275px;
}

HTML

<head> 
  <meta charset="UTF-8"> 
  <link rel="stylesheet" href="your-stylesheet.css">
</head> 
<body> 
  <input type="button" value="MakeTable" onClick="makeArr()"> 
  <div class="tables" id="tables" > 
    <div id="myTable1"> 
    </div> 
    <table id="myTable2"> 
      <th>Always here,same size</th> 
      <tr> 
        <td>1</td> 
      </tr> 
      <tr> 
        <td>2</td> 
      </tr> 
      <tr> 
        <td>3</td> 
      </tr> 
      <tr> 
        <td>4</td> 
      </tr> 
    </table> 
  </div> 
  <script src="your-script.js"></script>
</body>

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