允许HTML表调整大小，而无需硬编码大小大于页面宽度

Question

我有一些JavaScript代码可以调整表列的大小，问题是，如果我将列更宽，并且该表已经使用了该页面的100％，它将通过使其他列更小。

https://jsfiddle.net/paultaylor/v12x963o/22/

我要它做的就是使该列更宽并保持其他列相同，这通常意味着需要一个horzontal滚动条，然后需要一个。

，但我似乎唯一能够做的是将表格宽度宽宽，而不是在开始时(即设置表样式设置表样式(：2000px

，但这意味着从开始就可以滚动栏，默认情况下，我希望表适合屏幕，并且只有用户调整大小，也比屏幕更宽，此外，我将表宽度设置为2000px以来是一个arbitary值。

我尝试制作桌子样式display: flex;flex-wrap: nowrap;但是它没有效果

注意提出的重复问题是要求一种调整表列大小的方法，此问题使用该解决方案，但询问了一个有关如何允许表宽度大于屏幕宽度的特定问题补偿

Answer 1

没有表元素，让元素超出页面宽度更简单。

我建议在JSON中定义您的表数据，然后从该数据进行编程生成HTML。

此代码只是超出页面宽度。

const cols = getCols(4);//array of the col-n elements
function getCols(nCols){
  const arr = [];
  for(let i=0;i<nCols;i++){
    arr.push(document.getElementById(`col-${i}`));
  }
  return arr;
}
//use custom code on cols as you already have to change their widths.
//probably better to ignore the left side of the first column and the right side of the last column.
//decide how to handle the right column width considering you cannot drag beyond the page width.
/*
e.g.
on drag check mouse x distance to element.right, if within range (e.g. 8 px), set element.width to distance of element.left from mouse x.
*/

#container {
  white-space: nowrap;
  overflow: auto;
}
.col {
  display: inline-block;
}
input[type="text"] {
  width: 30ch;
  display: block;
}

<!-- this should be generated with javascript with the table data as a JSON object -->
<div id="container">
  <div id="col-0" class="col">
    <div id="header-0"> Header 0 </div>
    <input id="input-0-0" value="input 0.0" type="text">
    <input id="input-0-1" value="input 0.1" type="text">
  </div>
  <div id="col-1" class="col">
    <div id="header-1"> Header 1 </div>
    <input id="input-1-0" value="input 1.0" type="text">
    <input id="input-1-1" value="input 1.1" type="text">
  </div>
  <div id="col-2" class="col">
    <div id="header-2"> Header 2 </div>
    <input id="input-2-0" value="input 2.0" type="text">
    <input id="input-2-1" value="input 2.1" type="text">
  </div>
  <div id="col-3" class="col">
    <div id="header-3"> Header 3 </div>
    <input id="input-3-0" value="input 3.0" type="text">
    <input id="input-3-1" value="input 3.1" type="text">
  </div>
</div>