How to make product description tables mobile responsive?

[yasinsarkar]

Hello!

I have created tables for my product description. They look fine on desktop but they are not responsive on mobile.

How can I solve it? Thanks!

[Dan-From-Ryviu]

Hi @yasinsarkar 

Could you drop your page link here to check?

[yasinsarkar]

Sure, please check https://www.mistelly.com/products/cozy-santa-sweater-for-fall-winter

[Dan-From-Ryviu · Accepted solution]

Please update your table code to this one 

<table class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
	<thead>
		<tr>
			<th scope="col"><span><strong>Size</strong></span></th>
			<th scope="col"><span><strong>Shoulder/Inch</strong></span></th>
			<th scope="col"><span><strong>Bust/Inch</strong></span></th>
			<th scope="col"><span><strong>Sleeve Length/Inch</strong></span></th>
			<th scope="col"><span><strong>Length/Inch</strong></span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">S</th>
			<td data-label="Shoulder/Inch">15.35</td>
			<td data-label="Bust/Inch">43.31</td>
			<td data-label="Sleeve Length/Inch">25.20</td>
			<td data-label="Length/Inch">18.90</td>
		</tr>
		<tr>
			<th scope="row">M</th>
			<td data-label="Shoulder/Inch">16.14</td>
			<td data-label="Bust/Inch">44.88</td>
			<td data-label="Sleeve Length/Inch">25.59</td>
			<td data-label="Length/Inch">19.69</td>
		</tr>
		<tr>
			<th scope="row">L</th>
			<td data-label="Shoulder/Inch">16.93</td>
			<td data-label="Bust/Inch">46.46</td>
			<td data-label="Sleeve Length/Inch">25.98</td>
			<td data-label="Length/Inch">20.47</td>
		</tr>
		<tr>
			<th scope="row">XL</th>
			<td data-label="Shoulder/Inch">17.72</td>
			<td data-label="Bust/Inch">48.03</td>
			<td data-label="Sleeve Length/Inch">26.38</td>
			<td data-label="Length/Inch">21.26</td>
		</tr>
	</tbody>
</table>

And then go to your theme.liquid file, add this code before </head> tag and check again

{%- if template.name == 'product' -%}
<style>
.product table {
    background-color: transparent;
    border-collapse:collapse;
  	font-family: Arial, Helvetica, sans-serif
}

th {
    text-align:left
}

.dcf-txt-center {
      text-align: center!important
    }

    .dcf-txt-left {
      text-align: left!important
    }

    .dcf-txt-right {
      text-align: right!important
    }
    
.dcf-table caption {
      color: var(--caption);
      font-size: 1.13em;
      font-weight: 700;
      padding-bottom: .56rem
    }

    .dcf-table thead {
      font-size: .84em
    }

    .dcf-table tbody {
      border-bottom: 1px solid var(--b-table);
      border-top: 1px solid var(--b-table);
      font-size: .84em
    }

    .dcf-table tfoot {
      font-size: .84em
    }

    .dcf-table td, .dcf-table th {
      padding-right: 1.78em
    }

    .dcf-table-bordered, .dcf-table-bordered td, .dcf-table-bordered th {
      border: 1px solid var(--b-table)
    }

    .dcf-table-bordered td, .dcf-table-bordered th, .dcf-table-striped td, .dcf-table-striped th {
      padding-left: 1em;
      padding-right: 1em
    }

    .dcf-table-bordered tr:not(:last-child), .dcf-table-striped tr:not(:last-child) {
      border-bottom: 1px solid var(--b-table)
    }

    .dcf-table-striped tbody tr:nth-of-type(2n) {
      background-color: var(--bg-table-stripe)
    }

    .dcf-table thead td, .dcf-table thead th {
      padding-bottom: .75em;
      vertical-align: bottom
    }

    .dcf-table tbody td, .dcf-table tbody th, .dcf-table tfoot td, .dcf-table tfoot th {
      padding-top: .75em;
      vertical-align: top
    }

    .dcf-table tbody td, .dcf-table tbody th {
      padding-bottom: .75em
    }

    .dcf-table-bordered thead th {
      padding-top: 1.33em
    }

    .dcf-wrapper-table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      padding-bottom: 1em;
      position: relative;
      right: 50%;
      width: 100vw
    }

    @media only screen and (max-width:42.09em) {
      .dcf-table-responsive thead {
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
        white-space: nowrap
      }
      .dcf-table-responsive tr {
        display: block
      }
      .dcf-table-responsive td {
        -webkit-column-gap: 3.16vw;
        -moz-column-gap: 3.16vw;
        column-gap: 3.16vw;
        display: grid;
        grid-template-columns: 1fr 2fr;
        text-align: left!important
      }
      .dcf-table-responsive.dcf-table-bordered, .dcf-table-responsive.dcf-table-bordered thead th {
        border-width: 0
      }
      .dcf-table-responsive.dcf-table-bordered tbody td {
        border-top-width: 0
      }
      .dcf-table-responsive:not(.dcf-table-bordered) tbody tr {
        padding-bottom: .75em
      }
      .dcf-table-responsive:not(.dcf-table-bordered) tbody td {
        padding-bottom: 0
      }
      .dcf-table-responsive:not(.dcf-table-bordered):not(.dcf-table-striped) tbody td {
        padding-right: 0
      }
      .dcf-table-responsive.dcf-table-bordered tbody tr:last-child td:last-child {
        border-bottom-width: 0
      }
      .dcf-table-responsive tbody td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        padding-right: 1.78em
      }
    }

.dcf-overflow-x-auto {
      overflow-x: auto!important;
      -webkit-overflow-scrolling: touch
    }
    
.dcf-w-100\% {
  width: 100%!important;
}    
</style>
{%- endif -%}

Result 

[yasinsarkar]

Thank you for your suggestion. Your design is good but my client requirements need to responsive to this table. Please tell is it possible to respond to this type of table?

[Dan-From-Ryviu]

It has too much data so please add this code to your theme.liquid file to make this table scrollable to view data in the right

<style>
.accordion__content table {
    overflow-x: scroll;
    display: flex;
}
</style>

[Ahmed10seeq]

hi good eveng , i faced same issue ,can you help me