Question

我正在努力创建一个包含变量宽度列的html表。

以下是我尝试之一的示例

<th style="width:300px;"><input class="form-control" type="text"  value = "NAME"></th>

th的style属性似乎对输出没有任何影响。我也尝试过：

<th style="width:30%;"><input class="form-control" type="text"  value = "NAME"></th>

我试图解决的问题是我正在尝试编写一些Python代码来创建htm表，其中包含一些可能需要修改的数据（文本输入框的原因）。在我最初的尝试中，表列都具有相同的宽度，但是一些列（如名称）需要更宽，以便显示完整的内容（或更接近完整内容）

我也试过

 <th colspan = "2"><input class="form-control" type="text"  value = "NAME"></th>

所有这些建议都是基于阅读我写这个问题时出现的类似问题。如果重要的是我在Firefox中查看结果，但我希望解决方案在浏览器中保持一致。

这些建议都不起作用，所有列都以相同的宽度显示。

Answer 1

这是一个简单的例子，可以帮助您使用vanilla javascript：

＆＃13;

var rng = document.querySelector("input");

read("mousedown");
read("mousemove");

function read(evtType) {
  rng.addEventListener(evtType, function() {
    window.requestAnimationFrame(function () {
       document.querySelector("div").style.width = rng.value + "px";
    });
  });
}

＆＃13;

#column {
  width: 300px;
  height: 600px;
  background: lightblue;
}

input {
  width: 297px;
  margin-bottom: 10px;
}

＆＃13;

<input type="range" min="40" max="550"/>
<div id="column"></div>

＆＃13;

如您所见，它会根据用户的输入更改宽度;）

如何使用html中的输入字段修改列宽

1 个答案: