ACFのテーブルアドオンで、テンプレートで簡単に使えるシンプルなテーブルを作成

<?php		
	$table = get_field( 'table_test' );
		if ( ! empty ( $table ) ) {
			echo '<div class="tabletest"><table border="0">';
 			if ( ! empty( $table['caption'] ) ) {
				echo '<caption>' . $table['caption'] . '</caption>';
 			}
			if ( ! empty( $table['header'] ) ) {
 				echo '<thead>';
				echo '<tr>';
 				foreach ( $table['header'] as $th ) {
 					echo '<th>';
        			echo $th['c'];
        			echo '</th>';
      			}
      			echo '</tr>';
    			echo '</thead>';
  			}
  			echo '<tbody>';
    		foreach ( $table['body'] as $tr ) {
    	    	echo '<tr>';
      			foreach ( $tr as $td ) {
      				echo '<td>';
        			echo $td['c'];
        			echo '</td>';
      		}
      		echo '</tr>';
    	}
    	echo '</tbody>';
  		echo '</table></div>';
	}
?>	

.tabletest{
	margin:auto;
	padding: 6em 3em 1em;
	overflow-x: scroll;
}

.tabletest th,td {
	padding: 0.7em;
	vertical-align: middle;
}

.tabletest table {
    border-collapse: collapse; /* セルの線を重ねる */
    width: 100%;
	min-width: 740px;
}
	
.tabletest thead th {
    width: 100px; 
    text-align: left;
	font-weight: 500;
	background: #000;
	color: #fff;
	border: none;
	border-left: solid 1px #eee;
	text-align: left ;
}

.tabletest tbody tr :first-child {
	border-left: none;
	text-align: center;
}
	
.tabletest tbody tr :nth-child(3) {
	text-align: right;
}

.tabletest tbody tr :last-child {
	border-right: none;
	text-align: right;
}

.tabletest tbody td {
   	text-align: left;  
	border-right: solid 1px #ccc; 
}

.tabletest tbody tr:nth-child(even){
   	background: #eee;  
}

@media screen and (min-width: 1250px) {
	.tabletest{
		padding: 8em 10% 1em;
		max-width: 1800px;
	}	
}