【表】スマホで見るとアコーディオンになるテーブル【WordPressカスタマイズ】

/************************************
** 折りたたみテーブル
************************************/
.p-accordion-table {
	line-height:1.6;
	width:100% !important;
	border-collapse: collapse;
	max-width: 100%;
	word-break: break-all;
	border:none !important;
}
.p-accordion-table tr {
	border:none !important;
}
.p-accordion-table th,.p-accordion-table td{
	vertical-align: middle;;
	padding:13px !important;
	border: solid 1px #ddd !important;
	font-size:0.85em !important;
}
.p-accordion-table th {
	background: #fffbf0;
	letter-spacing: 1px;
	font-weight: 500 !important;
	color: #555 !important;
	min-width: calc(5vw + 50px);
	text-align:center;
	max-width:400px;
}
.p-accordion-table td {
	background:#fff;
}
.p-accordion-table td p{
	padding-bottom:1.2em;
	margin:0;
}
.p-accordion-table td p:last-child{
	margin-bottom:0;
	padding-bottom:0;
}
.p-accordion-table ul{
	margin:0;
	padding:0 1.5em;
}
@media screen and (max-width: 560px) {
	.p-accordion-table th,.p-accordion-table td {
		display: block;
		width: 100% !important;
		border-bottom:none !important;
	}
	.p-accordion-table tr:last-child{
		border-bottom:1px solid #ccc !important;
	}
	.p-accordion-table th{
		padding: 8px 45px 8px 12px !important;
		position:relative;
		cursor:pointer;
		max-width:100%;
		text-align:left;
	}
	.p-accordion-table td{
		padding:0 !important;
	}
	.p-accordion-table td span.inner-table{
		padding: 10px;
		display: block;
	}
	.p-accordion-table th:after {
		content: "";
		position: absolute;
		width:7px;
		height: 7px;
		right: 18px;
		top: 18px;
		transition: all 0.2s;
		border-top: 2px solid #555;
		border-right:2px solid #555;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.p-accordion-table .table-active:after {
		top: 15px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
}

//アコーディオンテーブル
if ( !function_exists( 'p_accordion_table' ) ):
function p_accordion_table() {
echo <<< EOM
<script>
jQuery(function(){
    if (jQuery('.p-accordion-table th').css('display')=='block') {
    jQuery('.p-accordion-table tr td').wrapInner('<span class="inner-table">');
    jQuery('.p-accordion-table tr th.table-active').nextAll('td').css('display','none');
    jQuery('.p-accordion-table tr th').click(function(){
       if(jQuery(this).next('td').css('display')=='block'){
         jQuery(this).nextAll().slideToggle();
         jQuery(this).toggleClass('table-active');
       } else {
         jQuery(this).nextAll().slideToggle();
         jQuery(this).toggleClass('table-active');
       }
    });
    }
})
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'p_accordion_table' );
endif;

<table class="p-accordion-table">
<tbody>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
</tbody>
</table>

<table class="p-accordion-table">
<tbody>
<tr>
<th>見出し1</th>
<td>コンテンツ1-1</td>
<td>コンテンツ1-2</td>
<td>コンテンツ1-3</td>
</tr>
<tr>
<th>見出し2</th>
<td>コンテンツ2-1</td>
<td>コンテンツ2-2</td>
<td>コンテンツ2-3</td>
</tr>
<tr>
<th>見出し3</th>
<td>コンテンツ3-1</td>
<td>コンテンツ3-2</td>
<td>コンテンツ3-3</td>
</tr>
<tr>
<th>見出し4</th>
<td>コンテンツ4-1</td>
<td>コンテンツ4-2</td>
<td>コンテンツ4-3</td>
</tr>
<tr>
<th>見出し5</th>
<td>コンテンツ5-1</td>
<td>コンテンツ5-2</td>
<td>コンテンツ5-3</td>
</tr>
</tbody>
</table>

<table class="p-accordion-table">
<tbody>
<tr>
<th class="table-active">見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th class="table-active">見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>見出し</th>
<td>コンテンツ</td>
</tr>
</tbody>
</table>