アコーディオンメニューの中にテーブルを入れ込みたい

Question

下記、アコーディオンメニューの中に、テーブルを入れ込みたいのですが、うまく表として反映されません。

正しいHTMLを教えてください。

下記、URLのテーブルを入れ込みたいです。

リンク内容

宜しくお願い致します。

Comments

[Lhankor_Mhy]

うまく表として反映されていない状態のコードをご提示いただけますか？

[sktwmg8888]

【アコーディオンメニュー・CSS】

.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #000000;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-weight: bold;
line-height: 4;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #FFFFFF;
border-bottom: solid 2px #dedede;
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #000000;
background: #FFFFFF;
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
padding-top: 5px;
}
.cp_actab input[type=checkbox] + label::after {
content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}

【テーブルHTML】

<table class="shousai">

<tr>
<th>名前</th><td>さとう</td>
</tr>

<tr>
<th>年齢</th><td>19</td>

<tr>
<th>年齢</th><td>19</td>

<tr>
<th>年齢</th><td>19</td>

<tr>
<th>年齢</th><td>19</td>

<tr>
<th>血液型</th><td>A型</td>
</tr>

</table>

【テーブルCSS】

table.shousai.th{/*thに対して*/
color: #000000;/*文字色*/
background: #d3d3d3;/*背景色*/
border: 1px solid;
border-color: #a9a9a9;
}

table.shousai.td{/*tdに対して*/
color: #000000;/*文字色*/
background: #ffffff;/*背景色*/
border: 1px solid;
border-color: #a9a9a9;
}
/*余白指定は省略*/

上記になります。
HTML・CSSともに、ネット上からコピーしてきた物です。
初心者で基礎が分かってなく、所々おかしいところがあると思いますが、
ご教示お願い致します。

[Lhankor_Mhy]

「うまく表として反映されません」とのことですが、具体的には何が起きていますか？
テーブルの罫線が分割されている、とかですか？

[sktwmg8888]

テーブルのCSSの内容が反映されません。（枠線、バックカラー）

[Lhankor_Mhy]

問題を把握しました。

Answer 1

table.shousai.th→table.shousai thとしてみてはどうでしょうか？

クラスセレクター - CSS: カスケーディングスタイルシート | MDN
子孫結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[sktwmg8888]

ありがとうございました！
table.shousai th　へ変更したらCSSが表示されました！
本当に助かりました。
迅速なご丁寧なご回答、ありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。

[sktwmg8888]

すみません！！
追加で質問があります。

【テーブルCSS】

table.shousai th{/*thに対して*/
color: #000000;/*文字色*/
background: #d3d3d3;/*背景色*/
border: 1px solid;
border-color: #a9a9a9;
overflow-x : auto
width: 30%;
padding : 10px;
}

table.shousai td{/*tdに対して*/
color: #000000;/*文字色*/
background: #ffffff;/*背景色*/
border: 1px solid;
border-color: #a9a9a9;
overflow-x : auto
width: 70%;
padding : 10px;
}
/*余白指定は省略*/

table.shousai{
width: 100%;
}

上記にCSSを変更したのですが、今度はアコーディオンボックスの途中までしか表示されなくなってしまいました。
また、下記HTMLの項目も初回より増やしました。

原因は何でしょうか？
ご回答お待ちしております。

【アコーディオンボックス・HTML】

<table class="shousai">

<tr>
<th>カラー</th><td>レッド</td>
</tr>

<tr>
<th>ワイヤー</th><td>なし</td>

<tr>
<th>パッド</th><td>なし</td>

<tr>
<th>ホック</th><td>なし</td>

<tr>
<th>ボーン</th><td>なし</td>

<tr>
<th>透け感</th><td>全体的にあり</td>

<tr>
<th>収縮性</th><td>あり</td>

<tr>
<th>ストラップ</th><td>取り外し/不可、長さ調節/可能</td>
</tr>

</table>

[Lhankor_Mhy]

.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}

20emでは小さすぎる、という話では？

[sktwmg8888]

何度もお答えいただき、ありがとうございます。

.cp_actab input:checked ~ .cp_actab-content {
max-height: 50em;
}

上記へ変更したところ、解決致しました。
ありがとうございます。
大変助かりました。

[Lhankor_Mhy]

いえいえ。
どうせならもっと伸ばしておいた方がいいかもしれないですよ。99999pxとか。