javascript - Javascript中に変更されない特定の位置にテーブルを設定します

Question

HTML には、ラベルとテキスト ボックスのテーブルを含む div があります。

次の HTML コードは、「パスワード」を含む「td」に属します。

<asp:TextBox ID="Password" runat="server" TextMode="Password" onkeyup="return passwordChanged();"></asp:TextBox>
<span id="strengthID"></span>

passwordChanged は、パスワードの強度を判断する JavaScript 関数です。この関数は、スパン 'strengthID' の innerHTML を変更します

私の問題は単純です。'stengthID' の内容が (onkeyup イベントで) 変更されると、テーブル全体が左にシフトします。

私の目標は、スパンの内部テキストを変更しながら、すべてをそのまま維持することです。私はこの振る舞いを取り除くことができませんでした。使用する必要がある可能性のある css 属性をいくつか教えてください。または他の提案はありますか？

ありがとう、

Answer 1

最初の列に wdith を指定する必要があります。

例えば

<td style="width:150px;">

行の最初の列の幅を指定すると、仕事ができます

Answer 2

その td に固定幅を設定する必要があります。そうしないと、ブラウザーは列の内容に応じて幅を調整します。

これを行う 1 つの方法は、各行の最初の td にクラスを追加し (1 行だけでも十分です)、labelたとえばそれを呼び出すことです。

次に、いくつかの CSS を追加します。

.label {
   width: 123px; /* Some width of your choice */
}