
テーブルの任意の列を非表示にするための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も見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
文字列が入っているtdを削除せず非表示にしたい
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
<JavaScript>tableタグを入力不可にしたい。
JavaScript
-
-
4
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
5
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
6
html でのテキスト結合について
その他(プログラミング・Web制作)
-
7
データベースのINT型項目にNULLはNG?
MySQL
-
8
HTMLからフォルダを開きたい
HTML・CSS
-
9
Javascript_submit()完了後に処理したい
JavaScript
-
10
表の中の列の順番を入れ替える場合の表示方法
HTML・CSS
-
11
テーブルのヘッダとボディの幅がズレルのを防ぐ
HTML・CSS
-
12
JSで、テーブルのある行のみ、非表示/表示を切り替えたい
JavaScript
-
13
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
14
ダブルクォーテーションのreplaceの方法
JavaScript
-
15
テーブル内の文字サイズを変更したい。
HTML・CSS
-
16
クリックされたセルの位置を取得するには?
JavaScript
-
17
フォームで同じ複数のnameで違うvalueの送信
Java
-
18
テーブル列の表示・非表示機能の追加
JavaScript
-
19
JavaScriptで特定のtdタグにclass名をつけたい
JavaScript
-
20
登録後、呼び出し元ページに戻るには
Microsoft ASP
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
tableの要素(tr、td)に一...
-
5
Dreamweaverで行間の調整
-
6
テーブルのセルに画像をピッタ...
-
7
htmlのtable内に画像
-
8
テーブルのヘッダとボディの幅...
-
9
html・cssで日付をキレイに揃え...
-
10
テーブルの入れ子について
-
11
表の一部を結合するには?
-
12
colspanを使うと正しく表示でき...
-
13
TRタグの余白をcssで設定するには
-
14
テーブルの表示がずれます
-
15
エクセルをhtml変換した、html...
-
16
<span>の中では折り返さないに...
-
17
HTML5で、テーブル内tdタグの高...
-
18
テーブルタグの中にdivを含めて...
-
19
TABLEのセルの中の文字を行単位...
-
20
html でのテキスト結合について
おすすめ情報
公式facebook
公式twitter