htmlの入力フィールドで列の幅を変更するには

Question

可変幅の列を含むhtmlテーブルを作成するのは難しいです。ここで

は番目のスタイル属性が出力に影響を持っていないように私の試み

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

の1の例です。私も試してみました：

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

私が解決しようとしている問題は、私は変更する必要がありますいくつかのデータをHTMテーブルを作成するために、いくつかのPythonコードを記述しようとしていますということである（テキスト入力ボックスの理由）。私の最初の試みでは表の列すべてが同じ幅を持っていますが、（名前のような）一部の列が一杯に内容が表示（または完全な内容に近い）されているので、より広くする必要が

私も

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

を試してみました

これらの提案はすべて、私がこの質問を書いていたときに現れた同様の質問を読むことに基づいていました。それが問題であれば、私はFirefoxで結果を見ていますが、ソリューションがブラウザ間で一貫していることを願っています。

すべての列が同じ幅で表示されるというこれらの提案は機能していません。ここで

Answer 1

は、それはあなたを助けるかもしれないjavascriptのバニラとの単純な例です：あなたが見ることができるように

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>

、それはユーザーの入力のベース幅を変更します。）