为动态生成列的HTML表格添加水平滚动功能

嘿，我来帮你搞定这个问题！因为你的表格是用Knockout动态生成列的，列数不固定，所以核心思路是让表格的容器能横向滚动，同时让表格保持自身的宽度不被挤压换行。下面是具体的实现步骤：

第一步：添加CSS样式 #

直接给你的表格容器（也就是#myDiv）和表格本身加一些样式就能解决问题，同时覆盖Bootstrap默认的表格样式避免冲突：

/* 让容器在内容超宽时自动显示水平滚动条 */
#myDiv.table {
  overflow-x: auto;
  min-width: 100%; /* 可选：列数少时让容器占满宽度，视觉更协调 */
}

/* 让表格根据动态列数自动计算宽度，不被容器强制压缩 */
#myDiv.table table {
  white-space: nowrap; /* 禁止表格内容换行，确保所有列在同一行 */
  width: auto; /* 覆盖Bootstrap默认的width:100%，让表格自适应列数 */
}

/* 确保你设置的单元格宽度生效，避免内容挤压变形 */
#myDiv.table td {
  white-space: nowrap;
}

第二步：保留现有HTML结构 #

你的现有HTML代码完全不用大改，只需要引入上面的CSS就行，这里再贴一遍方便你对照：

<div id="myDiv" class="table"> 
  <table class="table table-striped table-bordered"> 
    <thead> 
      <tr data-bind="foreach: columnNames"> 
        <th> 
          <span data-bind="text: $data"></span> 
        </th> 
      </tr> 
    </thead> 
    <tbody data-bind="foreach: data"> 
      <tr data-bind="foreach: $parent.columnNames"> 
        <td style="width:20px"><input type="text" class="form-control textbox"/> </td> 
      </tr> 
    </tbody> 
  </table>
</div>

一些额外提示 #

• 如果你的单元格内容很长，除了white-space: nowrap，还可以给单元格加max-width: [你想要的宽度]和text-overflow: ellipsis来显示省略号，但如果需要完整显示内容，就保留nowrap即可。
• 测试的时候多生成几列，就能看到滚动条自动出现啦，后续动态添加列也会自动适配，因为表格宽度是根据列数自动计算的。

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