web-dev-qa-db-ja.com

HTMLテーブル行<tr>を非表示にしてスペースを占有しないようにするにはどうすればよいですか？

HTMLテーブル行<tr>を非表示にしてスペースを占有しないようにするにはどうすればよいですか？ <tr>をstyle="display:none;"に設定しているものがいくつかありますが、それでもテーブルのサイズに影響し、テーブルの境界線は非表示の行を反映します。

htmlcsshtml-table
96
MikeN

あなたのTABLEのスタイルを見たいです。例えば。 「境界崩壊」

推測に過ぎませんが、「非表示」行のレンダリング方法に影響する可能性があります。

35
o.k.w

コードを含めることができますか？ style="display:none;"をテーブルの行に常に追加すると、行全体が事実上非表示になります。

93
Calvin

<tr id="result_tr" style="display: none;">を設定してから、JavaScriptで表示できます。

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
50
Jamshid Hashimi

display: none;が機能しない場合、代わりにheight: 0;を設定してはどうですか？要素をさらに削除するために、負のマージン（上部および下部の境界線の高さ（ある場合）以上）と併せて？ position: absolute; top: 0; left: -4000px;が機能するとは思いませんが、試してみる価値はあります。

私の側では、display: noneを使用するとうまくいきます。

7
David Thomas

私はこれに他の潜在的な解決策を追加すると思いました：

<tr style='visibility:collapse'><td>stuff</td></tr>

Chromeでのみテストしましたが、これを<tr>に配置すると、行が非表示になり、行内のすべてのセルが列の幅に影響します。特定の列が特定の幅より小さくならないように、いくつかのスペーサーだけでテーブルの下部に余分な行を作成し、このメソッドを使用して行を非表示にすることがあります。 （私はあなたが他のCSSでこれを行うことができるはずだと知っていますが、私はそれを動作させることはありませんでした）

繰り返しますが、私は純粋にchrome環境にいるので、これが他のブラウザーでどのように機能するのかわかりません。

6
rgbflawed

私は同じ問題を抱えていました。各セルにstyle = "display：none"を追加しました。

最後に、HTMLコメントを使用しました<!-- [HTML] -->

4
Simon Hughes

次のline-height：0px; font-size：0px; height：0px; margin：0; padding：0;を追加します

誰がそれをするか忘れます。 IE6の行の高さだと思います。

4
s_hewitt

スタイルdisplay：noneをtrとともに使用して非表示にでき、すべてのブラウザーで機能します。

3
Shahid Siddique

これは私に起こり、私はその理由について困惑しました。その後、私は任意のnbspを削除した場合に気づいた。行内にあったので、行がスペースを占有しませんでした。

2
Kevin H
var result_style = document.getElementById('result_tr').style;
result_style.display = '';

私にとって完璧に働いています。

1
Vignesh

入力タイプを非表示に変更する必要があります。入力タイプはすべて機能しますが、ページには表示されません

<input type="hidden" name="" id="" value="">

入力タイプがそれに設定されている限り、残りを変更できます。がんばろう！！

0
user5431987