html - 「display:none;」を作成するにはどうすればよいですか? div の要素を含む場合にも適用されます

Question

一部のコンテンツを非表示にして、フィールドで何かが選択されたときにのみ表示されるようにしようとしてい<select>ます。

私が理解していることから、最初はコンテンツを非表示にする必要があるため、これを実行しようとしています:

      <div id="abc" style="display:none;">
       <tr> <!-- Third row -->
        <td>
            from
        </td>

        <td>
           <select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">

                <option value="US" name="US">Some other US option</option>
                <option value="US" name="US">some US option</option>

            </select>
        </td>
       </tr>
      </div>

これは を非表示にするだけで、<div>その内容は非表示にしません。

Answer 1

ブラウザはこのコードを解析します

<table>
    <div>
        <tr>
            <td>TABLE CELL</td>
        </tr>
    </div>
</table>

この構造に

DIV がテーブルの行をラップせず、テーブルの前に (隣接する兄弟として) 配置されていることに注意してください。したがって、DIV を非表示にしても、表の行は非表示になりません。

無効な HTML により、予期しない動作が可能になります。有効な HTML を記述します。

Answer 2

それ<div>は正しくありません。<table>コードのどこかにタグがあると思いますが、ここには貼り付けていません。

タグにスタイルを適用してみてください<tr>。要素の子は常にその要素のスタイルを継承する必要があるため、<div>タグの配置ミスが問題になる可能性があります。代わりにこれを試してください：

<tr id="abc" style="display:none;"> <!-- Third row -->
    <td>
        from
    </td>

    <td>
       <select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">

            <option value="US" name="US">Some other US option</option>
            <option value="US" name="US">some US option</option>

        </select>
    </td>
</tr>