こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

レスポンシブ対応のテーブルの入れ子構造の実現

入れ子になっているテーブルのレスポンシブ対応をしたいです。
ただし外側のテーブルはレスポンシブ対応で、横に並んでいたカラムが縦に並び変わるのですが、内側のテーブルはそのままの形を維持するようなCSSを実現したいのです。
試しに作成してみたのですが、なかなかうまく動作しません。
CromeやFirefoxでは外側のテーブルは意図した通り切り替わるのですが、内側のテーブルがつぶれてしまいます。IE11やエッジでは外側のテーブルのdisplay:blockが継承されてしまい、内側のテーブルも同じように縦に切り替わってしまうのです。(display:unset;が効かない)
勉強し始めたばかりの初心者で大変申し訳ございませんが、どなたかご教示いただけないでしょうか?

[ resptest.css]
--
section table { width: 100%; }
section th, section td { padding: 10px; border: 1px solid #ddd; }
section th { background: #f4f4f4; }

/*----------------------------------------------------
.resp_tab レスポンシブ対応したテーブル
----------------------------------------------------*/
.resp_tab th { width: 30%; text-align: left; }
@media only screen and (max-width:800px){
.resp_tab { margin: 0 -10px; }
.resp_tab th, .resp_tab td{
width: 100%;
display: block;
border-top: none;
}
.resp_tab tr:first-child th { border-top: 1px solid #ddd; }
.resp_tab .normal_tab th ,.resp_tab .normal_tab td {
width: 100%;
display: unset;
}

}

/*----------------------------------------------------
.normal_tab 普通のテーブル
----------------------------------------------------*/

.normal_tab{
width: 100%;
border-collapse: collapse;
}

.normal_tab th{
width: auto;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
}
.normal_tab td{
width: auto;
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
}
--

[resptest.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テーブルの入れ子テスト</title>
<link rel="stylesheet" type="text/css" href="css/resptest.css"/>
</head>
<body>

<section id="sec01">
<table class="resp_tab">
<tr>
<td>
<table class="normal_tab">
<tr>
<th>head1</th>
<th>head2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
</td>

<td>
<table class="normal_tab">
<tr>
<th>head1</th>
<th>head2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>

</td>
</tr>
</table>
</section>

</body>
</html>

投稿日時 - 2016-06-15 19:30:48

QNo.9188087

困ってます

質問者が選んだベストアンサー

外側は<table>じゃなくて<div>等にすべきじゃないか?と思いつつ、

/* 見分けやすくするだけ */
.resp_tab,
.normal_tab{width:100%;}
.resp_tab th,
.resp_tab td{border:solid 1px red;margin:2px;}
.normal_tab th ,
.normal_tab td {border:solid 1px blue;}

/* これだけあれば */
@media only screen and (max-width:800px){
.resp_tab th,
.resp_tab td{display: block;}
.normal_tab th ,
.normal_tab td {display: table-cell;}
}

投稿日時 - 2016-06-16 01:22:39

お礼

どうもありがとうございます!やりたいことが完全に実現できています。
大変助かりました。
既存のWEBシステムの構造を活かしたまま、レスポンシブ対応を実現したかったので、
Tableの入れ子構造でこのような動きをさせたかったのです。

それにしてもこんなにシンプルに実現できるのですね・・・
ちゃんとHTMLとCSSを勉強します。
ご回答どうもありがとうございました。

投稿日時 - 2016-06-16 14:02:36

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問