Difficulty with Flexbox Layout Stretching Across Entire Width of Table

Hello everyone, I'm encountering a minor issue with the table on my webshop created using Shopify. The problem arises when writing HTML code for the table, where it fails to fill out the entire site's space. While adding padding helps in the mobile version to prevent shrinking, adjusting the width to 100% didn't provide the desired outcome.

I experimented with flex grow 1, but unfortunately, that didn't resolve the issue either. Here is what it looks like without utilizing flexbox:

View desktop sample View mobile sample

And here is how it appears with flexbox:

View mobile flexibility View desktop flexibility

I am seeking an alternate method to ensure the table object occupies the full width while maintaining a minimum width requirement to avoid display issues on mobile devices. Is there a way to expand the table dynamically based on available space without compromising its appearance?

Below is the code snippet of the 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>
    ...
    // Table content goes here
    ...
  </tbody>
</table>

Your guidance and suggestions are highly appreciated. Thank you in advance!

Warm regards,

Noah

htmlcsshtml-tableshopify

Answer №1

Forget about using display: flex in this case. Also, applying flex-grow: 1 to <tr> and <td> elements won't work since they are not direct descendants of the .sizingchart class like <tbody> is.

The simplest solution is to ditch flexbox altogether and just include: .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

Remove the display:flex property (which, by the way, overrides typical table behavior and its semantic meaning) and instead include width: 100% for the table.

Additionally, consider decreasing the side padding of the cells so they can adjust to smaller screens more effectively.

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

Utilizing the flexbox table design, here is a versatile version that works across different web browsers. By setting max-width: 550px;, you can control the width of the table layout. Each <td> column can have its max-width specified in pixels or as a percentage.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with Google font displaying on React site but not on mobile devices?

After importing a Google font that appears perfectly on desktop and cross-browser, an issue arises on mobile where default fonts are shown instead. Below is a snippet from my App.css file: @import url("https://fonts.googleapis.com/css2?family=Turret+Ro ...

javascripthtmlcssreactjs

What is the best way to center a div at the bottom of the screen?

Here is an example of CSS: #manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; } And here is the corresponding HTML: <div id="manipulate" align="center"> </div> What is the best w ...

htmlcss

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding

In PHP/HTML, check if a tab already exists before creating a new one

Currently, I am using PHP to retrieve a list of users from the database and have included a link with them. My goal is to have the linked file open in a new tab, but using target="_blank" causes a new tab to open every time I click on the link. However, I ...

javascripthtml

Problem encountered on WordPress involving a hyperlink division and a themed backdrop

Currently, I am a student studying web development and assisting a friend with adding custom links and a slider to her WordPress website. The issue we are encountering is that the original developer who created her website six years ago did not set up a ch ...

htmlcsswordpress

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...

cssanimation

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

csstwitter-bootstrapvue.jsbootstrap-4vuetify.js

Can an element contain two different classes at the same time?

Apologies if the title was unclear. I am trying to customize the color of my font awesome social media icons individually. Although I have successfully changed the color for all of them, that is not the desired outcome. Here is the icon: <i class=& ...

htmlcssfont-awesome

What is the best method to display PHP POST data with AJAX without using jQuery?

Essentially, I have this HTML code: <form method="post" id="myform" onsubmit="getData()"> <fieldset> <legend>Form</legend> <label>Color: <input type='text' id="color" name='color'></label> < ...

javascriptphpjqueryhtmlajax

Show the output of a JavaScript script in a styled color box using Bootstrap

Is there a way to incorporate JS calculation into a CSS Bootstrap colored box to display random numbers? The code below shows how the structure can be set up. Here is an example of code for a colored box in Bootstrap: <div class="row align-items-c ...

javascripthtmlcssbootstrap-4

Refresh the content of a webpage in AngularJS without the need to fully reload the entire page

Within my controller and view files, I have content that is sourced from various places, including API calls. For instance, I have information retrieved from the database where users can update certain details like their last name. After submitting the up ...

javascripthtmlangularjs

Reloading the page with Angular material's mat-menu feature

Recently, I incorporated a basic mat-menu example into my project. Strangely, whenever I click on the Menu button, it triggers a page reload. Below is the code snippet for reference. <button mat-button [matMenuTriggerFor]="menu">Menu</button> ...

javascripthtmlangularangular-material

Display only the selected index and conceal the rest

I am facing an issue where I have added a label and input in ng-repeat. The functionality works fine when the user clicks edit to show the input and hide the label. However, the problem arises when the user clicks on the new button as it displays the new i ...

javascriptjqueryhtmlangularjs

What is causing the dropdown menu to change colors to blue when hovering over the dropdown items?

I've noticed that my Bootstrap is causing the dropdown color to turn blue when I hover over a dropdown item. Despite trying different solutions, all my attempts have been unsuccessful. I suspect that it is due to bootstrap but I can't seem to fin ...

cssbootstrap-5

What is the best way to implement the hamburger-react-menu exclusively for mobile or small screen users?

Looking to implement a mobile menu in my component, specifically for mobile devices. The menu should display options like Home, Furniture Chair... when clicked on the hamburger icon. I have the hamburger-react-menu package installed but unsure whether to u ...

javascriptcssreactjshamburger-menu

Why are columns in Bootstrap 4 Grid not floating?

I have experience with BS 3 but am new to BS 4 and flex; I am having trouble understanding it. I have set up the grid as per the documentation, but the second column is displaying below the first instead of beside it. I have tried adjusting display proper ...

htmlbootstrap-4

Is my understanding of HTML and JavaScript code accurate?

Explaining lines of code to my class for homework has been a challenge. I tried my best to break it down, but I'm not entirely confident in my accuracy. My grade depends on being 100% precise and detailed. <!DOCTYPE html> The first command dec ...

javascripthtml

What is causing myInterval to not be cleared properly?

const homeButton = document.getElementById('home'); window.myInterval = 0; const showHome = () => { console.log('showHome'); window.myInterval = setInterval(wait, 400) } const wait = () => { console.log('wait'); ...

javascripthtmlcsssetinterval

Tips on adjusting the height of a background image based on the content of the page

Struggling with getting my background image to adjust based on page content size. The app has a main div and sidebar navigation. Background styles are set for the main div: const styles = makeStyles(theme => ({ backgroundStyle: { flexGrow: 1, ...

cssreactjsmaterial-ui

What is the best way to create the illusion of a swinging rope in an image?

How can I create a vertical image that appears to 'swing' back and forth on my website? I am looking to incorporate an image of a rope swinging subtly in the background as a theme for my site's animation. Is there a way to achieve this effe ...

javascriptjquerycss