How can I Modify column widths with input fields in html - html

Question

I am struggling to create an html table with columns of variant widths.
Here is an example of one of my attempts
<th style="width:300px;"><input class="form-control" type="text" value = "NAME"></th>
The style attribute of the th does not seem to have any effect on the output. I have also tried:
<th style="width:30%;"><input class="form-control" type="text" value = "NAME"></th>
The problem I am trying to solve is that I am trying to write some Python code to create htm tables with some data that might need to be modified (the reason for the text input box). In my initial attempts the table columns all have the same width but some columns (like name) need to be wider so the full contents are displayed (or closer to the full contents)
I have also tried
<th colspan = "2"><input class="form-control" type="text" value = "NAME"></th>
All of these suggestions were based on reading the similar questions that popped up as I was writing this question. If it matters I am looking at the results in Firefox but I do hope the solution is consistent across browsers.
None of these suggestions are working in that all the columns are displayed with the same width.

Answer 1

Here's a simple example with vanilla javascript that might help you:
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";
});
});
}
#column {
width: 300px;
height: 600px;
background: lightblue;
}
input {
width: 297px;
margin-bottom: 10px;
}
<input type="range" min="40" max="550"/>
<div id="column"></div>
As you can see, it changes the width based of the user's input ;)