回答編集履歴

3 補足

yambejp score 50766

2016/09/13 18:07  投稿

jQueryなど絡めてクライアントサイドの

処理を入れれば可能だと思いますが

マークアップの原則から考えればやるべきではありません

# 追記

ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら

こんな感じでどうでしょう？

```HTML

<table width=100>

<caption class="class">メニュー</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

- tableの幅を指定しておかないとcaptionがずれる

- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために

theadやtbodyはなるべく明示してください

```javascript

$(function(){

$('.class').siblings().css('display','none');

$('.class').click(function(){

var disp=$(this).siblings().css('display');

$(this).siblings().css('display',disp=='none'?'':'none');

});

});

```

# 追記2

確実でなくてよければ以下が近いかも

セレクタの解釈などブラウザの違いが吸収しきれませんが

とくにIEなどはbehavior:expression()など使わないとダメかもしれません

```css

.on-off{display:none;}

input[type="checkbox"].on-off + table>tbody{display:none;}

input[type="checkbox"].on-off:checked + table>tbody{display:table;}

```

```HTML

<input type="checkbox" id="Panel1" class="on-off">

<table class="menu" width=100>

<caption class="class">

<label for="Panel1">メニュー</label>

</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

# 補足

※idをきちんとつければ複数でもいけるはず

（古いIEを除く）

```CSS

.on-off{display:none;}

input[type="checkbox"].on-off + table>tbody{display:none;}

input[type="checkbox"].on-off:checked + table>tbody{display:table;}

```

```HTML

<input type="checkbox" id="Panel1" class="on-off">

<table class="menu" width=100>

<caption class="class">

<label for="Panel1">メニューa</label>

</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table><input type="checkbox" id="Panel2" class="on-off">

<table class="menu" width=100>

<caption class="class">

<label for="Panel2">メニューb</label>

</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

<input type="checkbox" id="Panel3" class="on-off">

<table class="menu" width=100>

<caption class="class">

<label for="Panel3">メニューc</label>

</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

2 追記2

yambejp score 50766

2016/09/12 12:11  投稿

jQueryなど絡めてクライアントサイドの

処理を入れれば可能だと思いますが

マークアップの原則から考えればやるべきではありません

# 追記

ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら

こんな感じでどうでしょう？

```HTML

<table width=100>

<caption class="class">メニュー</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

- tableの幅を指定しておかないとcaptionがずれる

- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために

theadやtbodyはなるべく明示してください

```javascript

$(function(){

$('.class').siblings().css('display','none');

$('.class').click(function(){

var disp=$(this).siblings().css('display');

$(this).siblings().css('display',disp=='none'?'':'none');

});

});

```

# 追記2

確実でなくてよければ以下が近いかも

セレクタの解釈などブラウザの違いが吸収しきれませんが

とくにIEなどはbehavior:expression()など使わないとダメかもしれません

```css

.on-off{display:none;}

input[type="checkbox"].on-off + table>tbody{display:none;}

input[type="checkbox"].on-off:checked + table>tbody{display:table;}

```

```HTML

<input type="checkbox" id="Panel1" class="on-off">

<table class="menu" width=100>

<caption class="class">

<label for="Panel1">メニュー</label>

</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

1 追記

yambejp score 50766

2016/09/12 11:40  投稿

jQueryなど絡めてクライアントサイドの

処理を入れれば可能だと思いますが

マークアップの原則から考えればやるべきではありません

マークアップの原則から考えればやるべきではありません

# 追記

ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら

こんな感じでどうでしょう？

```HTML

<table width=100>

<caption class="class">メニュー</caption>

<tbody>

<tr>

<th>1</th>

<td>メニュー１</td>

</tr>

<tr>

<th>2</th>

<td>メニュー2</td>

</tr>

</tbody>

</table>

```

- tableの幅を指定しておかないとcaptionがずれる

- javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために

theadやtbodyはなるべく明示してください

```javascript

$(function(){

$('.class').siblings().css('display','none');

$('.class').click(function(){

var disp=$(this).siblings().css('display');

$(this).siblings().css('display',disp=='none'?'':'none');

});

});

```