Shopify: Show product Metafields on Product page in Table

table-liquid.liquid

{%- comment -%} Metafields {%- endcomment -%}
{%- if product.metafields.xojson != blank -%} //change "xojson" with your scope of metafields, can be global or something else which you defined while creating them. 
    <div class="row container" id="Specifications">
        <header class="section__header column small-12">
            <h3 class="section__title heading h3">Product Attributes</h3>
        </header>
      	<div class="row">
            <div class="columns medium-6 small-12 tooltip-container">
                <table role="presentation" style="width: 80%;background: #fff;border: solid 1px #ddd;margin-bottom: 1.25rem;table-layout: auto;">
                    <tbody>
                        {% for field in product.metafields.xojson %}
                            {%- if field[1] != blank -%}
                                {%- assign meta_json = field[1] -%}
                                {% for cs_field in meta_json %}
                                    {%- if cs_field[1] != blank -%}
                                        <tr>
                                            <td><strong>{{cs_field[0]}}</strong></td>
                                            <td>{{cs_field[1]}}</td>
                                        </tr>
                                    {%- endif -%}
                                {% endfor %}
                            {%- endif -%}
                        {% endfor %}
                    </tbody>
              	</table>
          	</div>
    	</div>
	</div>
{%- endif -%}


//Some style is shop dependent, so change those classes accordingly. 

<style>
table tr th, table tr td {
    color: #222;
    font-size: .875rem;
    padding: .5625rem .625rem;
    text-align: left;
}
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    display: table-cell;
    line-height: 1.125rem;
}
table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #f9f9f9;
}
</style>