
テーブルの任意の列を非表示にするためのHTMLの書き方を教えてください。
ネットで調べたところvisibility: collapseで実現できる事までは分かったのですが、
IEではうまくいくのですが、Chromeでは非表示になりません。
例えば次のコードでは2x2のテーブルの最初の列が非表示になるはずなのです。
<table><colgroup style="visibility: collapse"></colgroup>
<tr><td>0</td><td>1</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
IEではうまくいきました。ChromeやEdgeではうまくいかず全ての列が表示されたままになってしまいます。
IEはもう時代遅れのブラウザということで、ChromeやEdgeでうまくいく書き方を教えてほしいです。
No.1ベストアンサー
- 回答日時:
こんにちは
><colgroup style="visibility: collapse"></colgroup>
を削除して
<style>
td:first-child{ display:none; }
</style>
ではいかがでしょうか?
できました。
またnth-child()で任意の列を非表示にする事もできるのですね。
これをさらに応用して、列に付けたidやname属性を指定して非表示にする事も出来るのでしょうか。
例えば次のように、列にa、bというidを付けてa列を指定して非表示にする事はできますか。
<table>
<tr><td id="a">0</td><td id="b">1</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
No.2
- 回答日時:
table 要素に付けた class 属性で票の列を隠す場合
<style>
table.hidden-col-a td:nth-child(1) { display:none; }
table.hidden-col-b td:nth-child(2) { display:none; }
</style>
<table class="hidden-col-a">
<caption>A列非表示</caption>
<tr><td>A1<td>B1
<tr><td>A2<td>B2
</table>
<table class="hidden-col-b">
<caption>B列非表示</caption>
<tr><td>A1<td>B1
<tr><td>A2<td>B2
</table>
うーん
番号を使わずに、列名(idやname属性)を指定して簡単に非表示にする方法があればいいなと思っていたのですが、やはり列番号を指定しないと無理っぽいですかね。
もうちょっと調べてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
文字列が入っているtdを削除せず非表示にしたい
HTML・CSS
-
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
-
4
JavaScriptで特定のtdタグにclass名をつけたい
JavaScript
-
5
tableの要素(tr、td)に一括でスタイルシートを適用したい
HTML・CSS
-
6
一覧から選択した行の行番号を取得について
JavaScript
-
7
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
8
HTMLからフォルダを開きたい
HTML・CSS
-
9
javascriptテキストBOX色を元に戻したい
JavaScript
-
10
html でのテキスト結合について
その他(プログラミング・Web制作)
-
11
インスタンス参照でアクセスできない。代わりに型名?
C言語・C++・C#
-
12
SQLで特定の項目の重複のみを排除した全項目を取得する方法
その他(プログラミング・Web制作)
-
13
CSVファイルの中で、「 , 」カンマを使いたい
その他(コンピューター・テクノロジー)
-
14
VBAでエクセルシートを更新(リフレッシュ)する方法を教えて下さい。
Excel(エクセル)
-
15
単一グループのグループ関数ではありません。
Oracle
-
16
onchangeイベントを強制的に発生させる
JavaScript
-
17
<input>の選択肢をプルダウンメニューから受け取り、hiddenで
JavaScript
-
18
テーブルの行の高さを指定する時全てのtdタグに?
HTML・CSS
-
19
formで特定のinputを送信しないようにしたい
JavaScript
-
20
URLのパラメータをGETのままで非表示にしたい
PHP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
テーブルの枠線(外内両方)を...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の背景色をマウス...
-
nowrapを指定しても改行される...
-
Safariでテーブルのセルの高さ...
-
HTMLで外部ファイルの読み込み
-
CSSで特定のテーブルだけに...
-
テーブル内の画像の高さ調整に...
-
ホームページのテキストを折り...
-
テーブルの一部分のセルだけに...
-
html5のテーブル内でdivのタブ...
-
TABLEのセルの中の文字を行単位...
-
HTMLでテーブルを横に並べる方法
-
テーブルタグの中にdivを含めて...
-
<th>タグを使っても太字にしな...
-
ブラウザによってテーブルのセ...
-
DWで、デザインビューに表示さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
javascriptを使って、指定行以...
-
TRタグの余白をcssで設定するには
-
テーブルのセルに画像をピッタ...
-
cssで、表示されるテキストによ...
-
中に<table></table>が使えるア...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
ホームページ 表の上の余白を...
-
逆L字の表(table)組み
-
EXCELからhtmlへの変換で罫線が...
-
表の中の列の順番を入れ替える...
-
テーブルの表示がずれます
-
htmlのtable内に画像
-
表の1列だけをCSSを使って右揃...
-
HTMLのテーブルで桁をそろ...
-
カレンダー内の数字を左上に配...
-
テーブルの行の高さを指定する...
おすすめ情報