Shopify自定义表格Flexbox布局无法占满容器宽度问题求助

问题原因 #

你原代码的核心问题是给原生<table>标签设置了display: flex，破坏了表格自带的行列布局逻辑，tr会被识别为flex容器的直接子元素横向排列，因此给tr、td设置的flex-grow完全不会生效。

实现思路 #

不用强行用Flex改造表格布局，用原生表格特性结合最小宽度限制+外层滚动容器就能满足需求：

• 外层套一个宽度100%的容器，设置横向溢出滚动，避免移动端页面被表格撑出全局横向滚动条
• 表格本身设置width: 100%，桌面端空间充足时自动撑满容器
• 给表格加min-width限制，值为所有列内容的总宽度，保证内容不会被压缩变形

修改后完整代码 #

<style type="text/css">
/* 外层滚动容器 */
.size-chart-wrap {
  overflow-x: auto;
  width: 100%;
  margin: 10px 0;
}

table.sizingchart {
  width: 100%;
  /* 最小宽度可根据你的实际列数、内容宽度调整，保证所有内容不挤压即可 */
  min-width: 760px;
  text-align: center;
  border-collapse: collapse;
}

table.sizingchart td {
  padding: 5px 15px;
  white-space: nowrap;
}

table.sizingchart tr:nth-child(even) {
  background: #EEEEEE;
}
</style>

<div class="size-chart-wrap">
  <table class="sizingchart">
    <tbody>
      <tr>
        <td><strong>Length (mm)</strong></td>
        <td>44</td>
        <td>47</td>
        <td>49</td>
        <td>52</td>
        <td>55</td>
        <td>57</td>
        <td>60</td>
        <td>62</td>
        <td>65</td>
        <td>67</td>
        <td>70</td>
      </tr>
      <tr>
        <td><strong>US Size</strong></td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <td><strong>UK &amp; AUS Size</strong></td>
        <td>F</td>
        <td>H</td>
        <td>J</td>
        <td>L</td>
        <td>N</td>
        <td>P</td>
        <td>R</td>
        <td>T</td>
        <td>V</td>
        <td>X</td>
        <td>Z1</td>
      </tr>
      <tr>
        <td><strong>EUR Size</strong></td>
        <td>44</td>
        <td>47</td>
        <td>49</td>
        <td>52</td>
        <td>55</td>
        <td>57</td>
        <td>60</td>
        <td>62</td>
        <td>65</td>
        <td>67</td>
        <td>70</td>
      </tr>
      <tr>
        <td><strong>East Asia Size</strong></td>
        <td>4</td>
        <td>7</td>
        <td>9</td>
        <td>11</td>
        <td>14</td>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
      </tr>
    </tbody>
  </table>
</div>

内容的提问来源于stack exchange，提问作者Noah Pfenniger