web-dev-qa-db-ja.com

HTMLテーブルの列を非表示にする方法は？

ASPXでテーブルを作成しました。要件に基づいて列の1つを非表示にしたいのですが、HTMLテーブルビルディングにはvisibleのような属性はありません。どうすれば問題を解決できますか？

htmlasp.nethtml-table
80
user601367

この目的にはスタイルシートを使用する必要があります。

<td style="display:none;">
147
Anuraj

nth-child CSSセレクターを使用して、列全体を非表示にできます。

#myTable tr > *:nth-child(2) {
    display: none;
}

これは、列Nのセル（thまたはtd）が常にその行のN番目の子要素であるという仮定の下で機能します。

デモはこちら

カラム番号を動的にしたい場合は、querySelectorAllまたはjQueryのような同様の機能を提供する任意のフレームワークを使用してそれを行うことができます：

$('#myTable tr > *:nth-child(2)').hide();

jQueryを使用したデモ

（jQueryソリューションは nth-childをサポートしないレガシーブラウザー でも動作します）。

79
Kos

以下も使用できます。

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

「非表示」はセルを非表示にしますが、スペースは保持しますが、「折りたたみ」ではdisplay：noneのようにスペースが保持されないという違いがあります。これは、列または行全体を非表示にするときに重要です。

25
Dov Miller

コスの答えはほぼ正しいが、有害な副作用をもたらす可能性がある。これはより正確です：

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS（カスケードスタイルシート）は、すべての子の属性をcascadeにします。これは、*:nth-child(1)が各tdの最初のtrを非表示にすることを意味しますおよびすべてのtd子の最初の要素を非表示にします。 tdのいずれかにボタン、アイコン、入力、選択などがある場合、最初のものは非表示になります（うーん！）。

現在非表示になっていない場合でも、追加する必要がある場合は、将来のフラストレーションをイメージしてください。そのようなあなたの将来の自己を罰しないでください、それはデバッグするのが苦痛になるでしょう！

私の答えは、#myTableのすべてのtdで最初のthとtrのみを隠し、他の要素を安全に保ちます。

22
Rick Smith

ブートストラップの人々は、.hiddenで<td>クラスを使用します。

10
theapache64

Col要素を使用して列を非表示にすることもできます https://developer.mozilla.org/en/docs/Web/HTML/Element/col

テーブルの2番目の列を非表示にするには：

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

既知の問題：これはGoogle Chromeでは機能しません。 https://bugs.chromium.org/p/chromium/issues/detail?id=174167 でバグに投票してください

5
Colonel Panic
<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

テーブルでは.hideFullColumnを使用し、thでは.hidecolを使用します。インデックスが各tdに対応していない可能性があるため、tdに個別にクラスを追加する必要はありません。

2
souvik sett

また、vs devがプログラムで提案することを行うには、列を反復処理し、特定のインデックスでtd要素を設定してそのスタイルを設定することにより、JavaScriptでスタイルを割り当てます。

1
tamarintech