在shopify中创建水平滚动表

Question

So, I am trying to create a website using Shopify.所以，我正在尝试使用 Shopify 创建一个网站。 I tried to edit the code and add three tabs in the product page.我尝试编辑代码并在产品页面中添加三个选项卡。 1 Tab will be the description the other is Size chart and the other is reviews. 1 个选项卡将是描述，另一个是尺码表，另一个是评论。 I was able to put the description and reviews in the tab but when I put the size chart and look the website from the phone the size chart doesnt fit.我可以将描述和评论放在标签中，但是当我放置尺码表并通过手机查看网站时，尺码表不适合。 So I wanted to create e horizonal scroll for the table.所以我想为表格创建一个水平滚动。 Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below you can see a picture of the tabs: Website picture您可以在下面看到选项卡的图片：网站图片

I used this code to create the review tabs.我使用此代码创建评论选项卡。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .tab-content
    {
        display:none;
    }
    .tab-content.active
    {
        display:block;
    }
    ul.tabs
    {
        list-style-type: none;
        padding:0;
        margin-left:0;
    }
    li.tab
    {
        display:inline-block;
        padding:10px 15px;
        cursor: pointer;
    }
    li.tab.active
    {
        color:grey;
        border-bottom:1px solid red;
    }
 
    </style>
 
</head>
<body>
 
    <ul class="tabs">
        <li class="tab" data-content-id="Description">tab 1</li>
        <li class="tab" data-content-id="Size chart">tab 2</li>
        <li class="tab" data-content-id="Reviews">tab 3</li>
    </ul>
 
    <div id="tab-content-1" class="tab-content">content 1</div>
    <div id="tab-content-2" class="tab-content">{{product.metafields.meta.sizechart}}</div>
    <div id="tab-content-3" class="tab-content">content 3</div>
 
    <script>
        tabs= document.querySelectorAll('.tab');
        tabContents= document.querySelectorAll('.tab-content');
 
        tabs.forEach(function(tab){
            tab.addEventListener('click',function(){
 
                contentId = this.dataset.contentId;
                content = document.getElementById(contentId);
 
                tabContents.forEach(function(content){
                    content.classList.remove('active');
                });
 
                tabs.forEach(function(tab){
                    tab.classList.remove('active');
                });
 
                this.classList.add('active');
                content.classList.add('active');
            });
        });
    </script>
 
</body>
</html>

I tried a lot of things to make the horizontal scroll bar.我尝试了很多东西来制作水平滚动条。 But it still now working.但它现在仍然有效。 If anyone has any experience with shopify can you please help me.如果有人对 shopify 有任何经验，请帮助我。

The table in html: html中的表格：

<div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Add This CSS & Check Updated HTML添加此 CSS 并检查更新的 HTML

 .table-outer{
          overflow: auto;
       }
        .table-outer table{
        min-width:600px;
}

 .tab-content { display:none; }.tab-content.active { display:block; } ul.tabs { list-style-type: none; padding:0; margin-left:0; } li.tab { display:inline-block; padding:10px 15px; cursor: pointer; } li.tab.active { color:grey; border-bottom:1px solid red; }.table-outer{ overflow: auto; padding:0 20px; }.table-outer table{min-width:600px;}

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul class="tabs"> <li class="tab" data-content-id="Description">tab 1</li> <li class="tab" data-content-id="Size chart">tab 2</li> <li class="tab" data-content-id="Reviews">tab 3</li> </ul> <div id="tab-content-1" class="tab-content">content 1</div> <div id="tab-content-2" class="tab-content" style="display:block;"><div class="table-outer"><div style='overflow-x:auto'> <table class="t2"> <thead> <tr> <td style="width: 54px;" rowspan="2">Size</td> <td style="width: 112px;" colspan="2">Length</td> <td style="width: 96px;" colspan="2">Waist</td> <td style="width: 86.6px;" colspan="2">Hip</td> </tr> <tr> <td style="width: 57px;">CM</td> <td style="width: 55px;">INCH</td> <td style="width: 39px;">CM</td> <td style="width: 57px;">INCH</td> <td style="width: 40px;">CM</td> <td style="width: 46.6px;">INCH</td> </tr> </thead> <tbody> <tr> <td style="width: 54px;">S</td> <td style="width: 57px;">100</td> <td style="width: 55px;">39.37 </td> <td style="width: 39px;">61</td> <td style="width: 57px;">24.02 </td> <td style="width: 40px;">95</td> <td style="width: 46.6px;">37.40 </td> </tr> <tr> <td style="width: 54px;">M</td> <td style="width: 57px;">101.5</td> <td style="width: 55px;">39.96 </td> <td style="width: 39px;">65</td> <td style="width: 57px;">25.59 </td> <td style="width: 40px;">99</td> <td style="width: 46.6px;">38.98 </td> </tr> <tr> <td style="width: 54px;">L</td> <td style="width: 57px;">103</td> <td style="width: 55px;">40.55 </td> <td style="width: 39px;">69</td> <td style="width: 57px;">27.17 </td> <td style="width: 40px;">103</td> <td style="width: 46.6px;">40.55 </td> </tr> <tr> <td style="width: 54px;">XL</td> <td style="width: 57px;">104.5</td> <td style="width: 55px;">41.14 </td> <td style="width: 39px;">73</td> <td style="width: 57px;">28.74 </td> <td style="width: 40px;">107</td> <td style="width: 46.6px;">42.13</td> </tr> </tbody> </table> </div></div></div> <div id="tab-content-3" class="tab-content">content 3</div> <script> tabs= document.querySelectorAll('.tab'); tabContents= document.querySelectorAll('.tab-content'); tabs.forEach(function(tab){ tab.addEventListener('click',function(){ contentId = this.dataset.contentId; content = document.getElementById(contentId); tabContents.forEach(function(content){ content.classList.remove('active'); }); tabs.forEach(function(tab){ tab.classList.remove('active'); }); this.classList.add('active'); content.classList.add('active'); }); }); </script> </body> </html>

在shopify中创建水平滚动表

问题描述

1 个解决方案

解决方案1
0 2020-12-16 12:28:07

在shopify中创建水平滚动表

问题描述

1 个解决方案

解决方案1 0 2020-12-16 12:28:07

解决方案1
0 2020-12-16 12:28:07