レスポンシブ対応のテーブルの入れ子構造の実現
入れ子になっているテーブルのレスポンシブ対応をしたいです。
ただし外側のテーブルはレスポンシブ対応で、横に並んでいたカラムが縦に並び変わるのですが、内側のテーブルはそのままの形を維持するような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>
お礼
ありがとうございました！