新生活を充実させるための「こだわり」を取材!!

テーブルの任意の列を非表示にするための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でうまくいく書き方を教えてほしいです。

教えて!goo グレード

A 回答 (2件)

こんにちは



><colgroup style="visibility: collapse"></colgroup>
を削除して
<style>
td:first-child{ display:none; }
</style>

ではいかがでしょうか?
    • good
    • 0
この回答へのお礼

できました。
また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>

お礼日時:2020/10/26 18:05

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>
    • good
    • 0
この回答へのお礼

うーん
番号を使わずに、列名(idやname属性)を指定して簡単に非表示にする方法があればいいなと思っていたのですが、やはり列番号を指定しないと無理っぽいですかね。
もうちょっと調べてみます。

お礼日時:2020/10/26 23:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

教えて!goo グレード

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング