web-dev-qa-db-ja.com

インラインJavaScriptまたはCSSを使用してTDタグを非表示にするにはどうすればよいですか？

JavaScriptまたはインラインCSSを使用して<td>タグを非表示にするにはどうすればよいですか？

javascripthtmlcssvisibility
15
Blankman

その場所で何が起こると期待していますか？テーブルをリフローして残りのスペースを埋めることはできません。これは、バグのあるブラウザーの応答のレシピのようです。

Td自体ではなく、tdの内容を非表示にすることを検討してください。

17
edeverett
.hide{

visibility: hidden

}

<td class="hide"/>

編集-あなただけ

表示と可視性の違いはこれです。

"display"：には多くのプロパティまたは値がありますが、焦点を当てているのは "none"および "block"です。 「none」は非表示値に似ており、「block」はshowに似ています。 "none"値を使用すると、このCSSスタイルを適用したHTMLタグを非表示にしますtotally。 「ブロック」を使用すると、htmlタグとそのコンテンツが表示されます。とても簡単です。

"visibility"：には多くの値がありますが、 "hidden"および "visible"値についてもっと知りたいです。 「hidden」は表示の「block」値と同じように機能しますが、これによりタグとそのコンテンツが非表示になりますが、そのタグの物理的なスペースは非表示になりません。たとえば、テキスト行が数行ある場合は、イメージ（写真）、次にアイコンとテキストのある3列2行の表があります。隠し値を持つ可視性cssを画像に適用すると、画像は消えますが、画像が使用していたスペースはその場所に残ります。つまり、テキストとテキストの間に大きなスペース（穴）テーブル。これで、ターゲットタグに「可視」値を使用すると、その要素が再び表示されます。

36
TStamper

何かを隠すのと同じ方法：visibility: hidden;

7
Welbog

Cssですべてが（またはほぼ）可能です。使用するのは次のとおりです。

display: none; //to hide

display: table-cell //to show
6
Andre Silva
<td style = "display:none" >
<p> Content display none </p>
</td>

または

<td style="visibility:hidden"> Your content is hidden </td>

次のことに注意してください。2つの方法は違いです。結果を確認するには試してみてください。

6
Hueston Rido

Javascriptにこれ以上ある場合は、javascriptライブラリを検討してください。 jquery これは少し速度を落としますが、より読みやすいコードを提供します。

jquery を介した質問のコード：

$("td").hide();

もちろん、 wikipediaでのこの比較 が示すように、他にもjavascriptライブラリがあります。

4
miku

スタイル属性を含めるだけで、<td>タグのコンテンツを非表示にできます：style = "display:none"

例えば

<td style = "display:none" >
<p> I'm invisible </p>
</td>
2
Kunal

次のインラインcssを使用して、a内のコンテンツを非表示にできます。

<div style="visibility:hidden"></div>

例えば：

<td><div style="visibility:hidden">Your Content Goes Here:</div></td>
1
Sheikh Rahat Ali