I have a small problem with my table. I am creating a wwebshop 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.
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 & 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
CodePudding user response：
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 & 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>CodePudding user response：
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 & 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>