
テーブルの任意の列を非表示にするための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
-
HTMLからフォルダを開きたい
HTML・CSS
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
JavaScriptで特定のtdタグにclass名をつけたい
JavaScript
-
6
一覧から選択した行の行番号を取得について
JavaScript
-
7
【SQL】他テーブルに含まれる値に合致する行を抽出
その他(データベース)
-
8
html でのテキスト結合について
その他(プログラミング・Web制作)
-
9
中に<table></table>が使えるアコーディオンを教えて下さい。
HTML・CSS
-
10
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
11
Javascript_submit()完了後に処理したい
JavaScript
-
12
TABLEのセルの中の文字を行単位、セル単位で色を変えたい
HTML・CSS
-
13
SQLで特定の項目の重複のみを排除した全項目を取得する方法
その他(プログラミング・Web制作)
-
14
tableの要素(tr、td)に一括でスタイルシートを適用したい
HTML・CSS
-
15
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
16
onchangeイベントを強制的に発生させる
JavaScript
-
17
PHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?
PHP
-
18
StrutsでJSPからListを受け取りたい
Java
-
19
同じIDで定義した要素の配列を取得したいが
JavaScript
-
20
テーブルで複数行をまとめて非表示にしたいです
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
テーブルのセルにアンカー
-
TRタグの余白をcssで設定するには
-
HTMLで文とテーブルの間が空く。
-
文字列が入っているtdを削除せ...
-
EXCELからhtmlへの変換で罫線が...
-
cssで、表示されるテキストによ...
-
掲示板//インラインフレーム内...
-
テーブルの線の内側の色も指定...
-
テーブル結合 縦横両方するには?
-
テーブル内のセル間にスペース...
-
テーブルタグの中にdivを含めて...
-
<th>タグを使っても太字にしな...
-
ホームページのテキストを折り...
-
html5のテーブル内でdivのタブ...
-
XHTMLに関する質問 順序が逆に...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
TRタグの余白をcssで設定するには
-
中に<table></table>が使えるア...
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
tableにul,または,olを入れられ...
-
ホームページ 表の上の余白を...
-
文字列が入っているtdを削除せ...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
EXCELからhtmlへの変換で罫線が...
-
逆L字の表(table)組み
-
値が0なら非表示にしたい
-
CSSだけで<table>の<td>や<tr>...
-
テーブルの外側の線を消す
-
HTMLで文とテーブルの間が空く。
-
表(テーブル)内の文字サイズ...
おすすめ情報