Solved

Make Table Responsive

yasinsarkar
Shopify Partner
4 0 0

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!

Beach-Bikini-Hollow-Out-Dress-–-MISTELLY.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6973 1319 1342

This is an 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 

Screenshot 2023-11-24 at 14.54.58.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
6973 1319 1342

Hi @yasinsarkar 

Could you drop your page link here to check?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

yasinsarkar
Shopify Partner
4 0 0
Dan-From-Ryviu
Shopify Partner
6973 1319 1342

This is an 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 

Screenshot 2023-11-24 at 14.54.58.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

yasinsarkar
Shopify Partner
4 0 0

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?

 

 

Beach-Bikini-Hollow-Out-Dress-–-MISTELLY.png

Dan-From-Ryviu
Shopify Partner
6973 1319 1342

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>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Ahmed10seeq
Visitor
1 0 0

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