表Flexbox问题填充整个宽度

Question

我的表有一个小问题。我正在用shopify创建一个网店，在那里你可以为你的桌子编写自己的html代码。

基本上问题是，这个表并没有填满整个网站。它在移动版上是这样的，因为我使用了填充物，这是必要的，否则桌子会缩小很多。我只需要所有东西都保持不变，但当有更多的东西时，表格应该会填满整个网站的空间。我用flex grow 1尝试过，但没有成功。

如果我将宽度设置为100%并且没有flexbox:，它会是什么样子

桌面移动

flexbox的外观：

移动柔性箱桌面flexbox

我需要另一种方法来将表对象调整为全宽而不增长，但它应该有一个最小宽度，因为否则在移动版本上，表看起来很糟糕。有没有一种方法可以在给定空间的情况下使表更大，即使有设置的最小填充，这样表就不会在移动设备上缩小。

这是我的表格代码：

<style type="text/css">
<!-- table.sizingchart {
display: flex;
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
}

table.sizingchart td,
table.sizingchart tr {
padding: 5px 15px;
flex-grow: 1;
}

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

-->
</style>
<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>

谢谢你的帮助和问候。

Noah

Answer 1

display: flex在这里对您没有帮助。此外，<tr>和<td>的flex-grow: 1对您没有帮助，因为它们不像<tbody>那样直接将子级引导到.sizingchart类。

最简单的解决方案是移除flexbox并简单添加：.sizingchart { width: 100%; }

.sizingchart {
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
width: 100%; 
}
table.sizingchart td,
table.sizingchart tr {
padding: 5px 15px;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}

<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>

Answer 2

只需擦除display:flex(BTW还取消了所有典型的表行为及其语义(，并将width: 100%添加到表中。

我也会减少单元格的侧边填充，这样它们就可以在更小的屏幕上变得更窄。

html, body {
margin: 0;
}
table.sizingchart {
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
width: 100%;
}
table.sizingchart td,
table.sizingchart tr {
padding: 5px 5px;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}

<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>

Answer 3

使用flexbox表，这是一个跨浏览器版本。表格的max-width: 550px;将设置表格的宽度。可以使用像素或百分比作为每个<td>列的最大宽度。

.sizingchart,
.sizingchart tr {
display: flex;
width: 100%;
max-width: 550px;
border-collapse: collapse;
text-align: center;
}
.sizingchart {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sizingchart tbody,
.sizingchart td {
display: block;
flex: 0 0 100%;
width: 100%;
}
.sizingchart td {
max-width: 6%;
padding: 5px 15px;
box-sizing: border-box;
text-align: inherit;
text-align: -webkit-match-parent;
}
.sizingchart td:first-child {
max-width: 140px;
}
.sizingchart tr:nth-child(even) {
background: #eee;
}

<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>