Table Flexbox Problem Filling whole Width - Shopify

NoahPfenniger
November 11, 2021
250 views
2 votes
3 Answers

I have a small problem with my table. I am creating a webshop with shopify and there you can write your own html code for your table.

Basically the problem is, that the table doesn’t fill out the entire site. It does on mobile version because I used padding and thats necessary beause otherwise there the table shrinks to much. I just need everything staying the same but the table should fill out the whole space of the site when there is more. I tried this using flex grow 1 but it didn’t work.

What it look’s like if i set width to 100% and without flexbox:

desktop
mobile

What it looks like with flexbox:

mobile flexbox
desktop flexbox

I need another way to adjust the table object to full width without grow but it should have a minimum width because otherwise on mobile version the table looks shitty. Is there a way to grow the table lagerger when the space is given even with a set minimum padding so the table cant shrink under that on mobile.

Here is the code of my table:

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

Thanks already for the help and best regards.

Noah

Answers

display: flex will not help you here. Also flex-grow: 1 for <tr> and <td> won’t help you as they are not direct children to the .sizingchart class as <tbody> is.

Easiest solution is to remove flexbox and simply add: .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>

Using the flexbox table, this is a cross-browser version. The max-width: 550px; of the table will set the width of the table. You may use pixels or a percentage for the max-width of each <td> column.

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

Just erase display:flex (which BTW also cancels all the typical table behaviour and its semantic meaning) and add width: 100% to the table.

And I would also reduce the side padding of the cells so they can get narrower on smaller screens.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Table Flexbox Problem Filling whole Width – Shopify

Answers