JavaScript动态生成带class的HTML表格丢失滚动条及布局异常求助

嘿，我看了你遇到的问题啦——动态生成的表格不仅没出现在员工表格右侧，还丢失了自身的滚动条，只能靠窗口滚动，这确实挺闹心的。咱们一步步来修复它：

问题根源分析 #

• 容器放错位置：你把生成的表格直接追加到了document.body里，但预先准备的带滚动的容器#table-scroll-tasks才是它该待的地方，这就是表格跑到下方的核心原因。
• CSS样式冲突：.tableTasks同时设置了width:100%和width:100px，导致宽度样式混乱；另外容器的布局逻辑没和员工表格配合好，也影响了左右对齐的效果。

修改后的完整代码 #

HTML部分 #

<!-- 员工表格容器（需要和任务表格容器配合实现左右布局） -->
<div id="employee-table-wrapper" style="width:18%; float:left; margin-right:1%; max-height:522px; overflow:auto;">
  <!-- 这里放置你的员工表格 -->
</div>

<!-- 任务表格的滚动容器 -->
<div id="table-wrapper-tasks">
  <div id="table-scroll-tasks">
  </div>
</div>

CSS部分 #

/* 任务表格外层容器 */
#table-wrapper-tasks {
  position: relative;
  width: 81%;
  float: right;
}

/* 负责触发滚动的内层容器 */
#table-scroll-tasks {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 522px;
}

/* 动态生成的表格样式 */
.tableTasks {
  width: 100%;
  margin-top: 5px;
  empty-cells: show;
  line-height: 35px;
  min-width: 800px; /* 设置最小宽度，确保横向滚动能触发 */
}

/* 可选：给单元格加边框，方便查看表格结构 */
.tableTasks td {
  border: 1px solid #ddd;
  padding: 0 10px;
}

JavaScript部分 #

// 获取参考表格的行数列数
var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;

// 创建表格并添加类名
var myTable = document.createElement('table');
myTable.classList.add("tableTasks");

// 循环生成表格内容
for(let i = 0; i < rows; i++) {
  const tr1 = document.createElement('tr');
  for(let j = 0; j < cols; j++) {
    const td1 = document.createElement('td');
    const text1 = document.createTextNode(`cell ${i+1}-${j+1}`);
    td1.appendChild(text1);
    tr1.appendChild(td1);
  }
  myTable.appendChild(tr1);
}

// 关键：把表格插入到指定的滚动容器中，而不是body
document.getElementById('table-scroll-tasks').appendChild(myTable);

核心修改点说明 #

1. 容器定位修正：将生成的表格插入到#table-scroll-tasks容器内，让表格继承该容器的滚动属性，解决滚动条丢失的问题。
2. 左右布局实现：通过float属性让员工表格容器和任务表格容器并排排列，两者宽度总和控制在100%以内（比如18%+1%+81%），确保对齐效果。
3. CSS样式优化：修复表格宽度冲突，设置min-width触发横向滚动；给容器明确max-height和overflow属性，启用表格自身的滚动机制。

这样修改后，动态生成的表格就会出现在员工表格右侧，并且拥有独立的X、Y轴滚动条啦～

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