アコーディオンメニューにテーブルを埋め込んだが、テーブルが全て表示されない

Question

前提・実現したいこと

アコーディオンメニューの中に、テーブルを入れ込みました。
ですが、アコーディオンメニュー（一番上）にテーブルが全て表示されません。
テーブルが途中で切れてしまいます。

HTML、CSSに問題があるか見ていただきたいです。

ご教示、宜しくお願い致します。

テーブル　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

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

<div class="cp_actab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">商品概要</label>
<div class="cp_actab-content">
<p>

<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>


</p>
</div>
</div>
<div class="cp_actab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">仕様</label>
<div class="cp_actab-content">
<p>生地　＆　生産国が入ります</p>
</div>
</div>
<div class="cp_actab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">送料・お届け</label>
<div class="cp_actab-content">
<p>
◆送料<br>
550円<br>
10,000円以上で送料無料<p>

◆お届け<br>
お取り寄せ商品の為、2週間〜3週間でお届け<p>

◆配送業者<br>
佐川急便、ヤマト運輸<br>
※一部地域（沖縄、離島など）を除く<p>

◆日時指定<br>
ご注文日の14日先〜30日先までお届け日をご指定いただけます</p>
</div>
</div>
<div class="cp_actab">
<input id="tab-four" type="checkbox" name="tabs">
<label for="tab-four">返品・交換</label>
<div class="cp_actab-content">
<p>返品・サイズ交換　不可<p>
こちらの商品は、ショーツがセットの衛生商品の為、返品・サイズ交換できません。<p>
※未開封・未使用の場合でも、返品・サイズ交換・返金・他の商品への交換はできません。
</p>
</div>
</div>
[ ]改行は<br />タグに置換する [ ]URLはリンクタグに置換する

Answer 1

質問しましたが、解決いたしました。

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

↓

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

にしたら全部表示されました。