Expanding cell on table

Solved
Highlighted
Excursionist
39 0 10

Hello all,

I have created a table that when I try it in www.w3schools.com it shows fine with all cells expanding correctly to the size of the text they contain:

Table_to_expand.PNG

When I add the same code to my custom page template in Shopify it seems that the cells stop to expand correctly as seen here (Debut theme):

Table_Shopify.PNG

It is evident in the first column where the text overlaps the second column header.

The code I use in the page is the following (schema part not included to make it shorter):

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h4 class="h2">{{ section.settings.title | escape }}</h4>
    </div>
  {% endif %}
</div>





<head>
<style>
table, th, td {
  border: 1px solid #eeccb4;
  border-collapse: collapse;
}
th, td {
  text-align: center;    
}
#th01 {
  table-layout: auto;
  
  font-weight: bolder;
}
#td01 {
  font-weight: bolder;
}
</style>
</head>

<body>
<h2>Size Convertion Table</h2>
<p>Use the following table to find the correct size for you.</p>

<table style="width:100%">
  <tr>
    <th id="th01">Country/Area</th>
    <th id="th01">XXS</th>
    <th id="th01">XS</th>
    <th id="th01">S</th>
    <th id="th01">M</th>
    <th id="th01">L</th>
    <th id="th01">XL</th>
    <th id="th01">XXL</th>
  </tr>
  <tr>
    <td id="td01">EU</td>
    <td>32</td>
    <td>32-34</td>
    <td>34-36</td>
    <td>38-40</td>
    <td>40-42</td>
    <td>44-46</td>
    <td>48-50</td>
  </tr>
  <tr>
    <td id="td01">IT</td>
    <td>36</td>
    <td>38</td>
    <td>40</td>
    <td>42</td>
    <td>44</td>
    <td>46</td>
    <td>48</td>
  </tr>
  <tr>
    <td id="td01">UK</td>
    <td>4</td>
    <td>4-6</td>
    <td>6-8</td>
    <td>10-12</td>
    <td>12-14</td>
    <td>16-18</td>
    <td>20-22</td>
  </tr>
  <tr>
    <td id="td01">US</td>
    <td>0</td>
    <td>0-2</td>
    <td>2-4</td>
    <td>6-8</td>
    <td>8-10</td>
    <td>10-12</td>
    <td>14-16</td>
  </tr>
  <tr>
    <td id="td01">AU / NZ</td>
    <td>4</td>
    <td>4-6</td>
    <td>6-8</td>
    <td>10-12</td>
    <td>12-14</td>
    <td>16-18</td>
    <td>20-22</td>
  </tr>
  <tr>
    <td id="td01">RU</td>
    <td>40</td>
    <td>42</td>
    <td>42-44</td>
    <td>46-48</td>
    <td>48-50</td>
    <td>50-54</td>
    <td>56-58</td>
  </tr>
</table>
</body>

I have tried css style options below but without success:

white-space: nowrap;

table-layout: auto;

 

Does anybody knows what is need to solve it, please?

Regards,

DuchessLB

 

 

0 Likes
Highlighted
Shopify Partner
74 7 18

Hi DuchessLB,

 

Hopefully I can help you sort this out! It looks like it could be because your table doesn't have enough horizontal space to display properly, but it's hard to tell without seeing it on the page.

Is there any chance I could grab your store URL from you so I can see it on the page?

 

Josh

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
0 Likes
Highlighted
Excursionist
39 0 10

Hello @JoshuaSarros ,

I've just sent the url and the pwd in a private message to you.

Regards,

Marcos

 

1 Like
Highlighted
Shopify Partner
74 7 18

This is an accepted solution.

Thanks Marcos! I just had a bit of a look at it and I think you should be able to fix it by changing this line from this:

<table style="width:100%">

to this:

<table style="width:auto">

 

Let me know how that goes and if it works any better for you?

 

Josh

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
1 Like
Highlighted
Excursionist
39 0 10

Hello @JoshuaSarros,

It worked like a charm!.

Thank you very much for your help and your fast response with this issue.

Have a nice day.

Best regards,

DuchessLB

 

1 Like
Highlighted
Shopify Partner
74 7 18

My pleasure! Feel free to get in touch again if you need a hand with anything else.

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
0 Likes