Table overflows Flexbox

UpstateLeafPeeper · January 2, 2021, 6:44pm

Hello. I have code for a Flexbox that you all helped me out with in the past that I want to use as a container for my table that Ray.H is helping me out with now.

When I make my browser window smaller to mimic mobile, the table is spilling out of the Flexbox.

I think the problem is that I am using max-width: 60% and so I am wondering what is a better way to code things?

here is what I have so far…

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>table_sp.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    #wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 60%;
      margin: 3em auto;
      padding: 2rem 3rem 3rem 3rem;
      border: 1px solid #333;
    }
    
    table{
      border-collapse: collapse;
    }
    
    caption{
      padding: 0 0 0.3rem 2rem;
      font-size: 1.1rem;
      font-weight: bold;
      line-height: 1.3;
      text-align: left;
    }
    
    caption small{
      font-size: 0.9rem;
      font-weight: normal;
    }
    
    #col-01{
      width: 10rem;
    }

    th, td{
      padding: 0.3rem 1rem 0.2rem 1rem;
      text-align: center;
      border: 1px inset #AAA;                     /* Inset */
    }
    
    thead th{
      padding: 0.5rem 1rem 0.3rem 1rem;
      vertical-align: bottom;
      background-color: #FFC;
    }
    
    tbody th{
      font-weight: normal;
      text-align: left;
    }
    
    tbody td:nth-child(2){
      text-align: left;
    }

    tbody td:nth-child(3),
    tbody td:nth-child(4){
      text-align: right;      
    }
    
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <table>
      <caption><small>Table 01:</small><br>U.S. Sales of Fuzzy Slippers for 2020</caption>
      <colgroup>
        <col id="col-01">
        <col id="col-02">
        <col id="col-03">
        <col id="col-04">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Description</th>
          <th scope="col">Price</th>
          <th scope="col">On Hand</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <th scope="row">Mens Bathrobe</th>
          <td>Soft heavy-duty for Winter</td>
          <td>$39.99</td>
          <td>547</td>
        </tr>

        <tr>
          <th scope="row">Fuzzy Slipper</th>
          <td>Cozy, fluffy extra comfy slippers</td>
          <td>$19.99</td>
          <td>7</td>
        </tr>

        <tr>
          <th scope="row">Sweat Pants</th>
          <td>Great for lounging around at home</td>
          <td>$24.99</td>
          <td>852</td>
        </tr>
      </tbody>      
    </table>
    
  </div>
  
</body>
</html>

UpstateLeafPeeper · January 2, 2021, 6:47pm

Here is a screenshot of the problem…

Ray.H · January 2, 2021, 11:26pm

Yes, 60% is the problem.
It is still 60% on smaller screens even when the table can no longer shrink it’s width.

You need it to be 100% of the available width on smaller screens. You don’t have to tell it to do that either, blocks naturally fill 100% of the available width on their own.

What you DO need to do is set your max-width in em, rem, or px. Determine that width according to the the max-width that your layout actually needs.

Here’s a starting point… (adjust as needed)

max-width: 70em;

UpstateLeafPeeper · January 2, 2021, 11:33pm

@Ray.H,

Hi. Have been playing around with my code all afternoon.

It seems the main problem is that I didn’t have a max-width on my table.

Haven’t done this kind of thing - especially media queries - in over a year so I’m rusty.

I think I have things looking good enough for now.

Thanks for the tip!

UpstateLeafPeeper · January 3, 2021, 12:20am

What screen sizes should I be setting media queries for?

I remember reading that you should not try and create media queries for every sized device as that is impossible. But I’m guessing there are a handful of sizes your website should support, right?

Also, what is the smallest size screen I need to support?

In Firefox’s Developer Tools, under “Responsive Mode”, you can go down to iPhone 5.

Is it necessary to support something that small?

Ray.H · January 3, 2021, 12:52am

If you need to reset the styles on any elements do it based on what your layout requires. Not any predetermined screen sizes or specific devices.

You will need to be able to scroll your table for small screens when the table can no longer shrink. You will need to wrap the table in it’s own scrollable div.

If you want to learn more about scrolling tables see Paul’s codepen demos.
Paul O’Brien on Codepen

Here’s the code from your 1st post with the changes I mentioned in this thread.

Run it in your browser and simulate any device under responsive mode.

Along with wrapping a div around the table, I also reduced the side paddings on your page wrapper. They needed to be smaller for mobiles, that could be done with a media query if you want the paddings larger for desktops.


    #wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 70em;
      margin: 3em auto;
      padding: 2rem .5rem 3rem .5rem;
      border: 1px solid #333;
    }
    .table-wrap {
      overflow-y:auto;
    }


<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>table_sp.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    #wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 70em;
      margin: 3em auto;
      padding: 2rem .5rem 3rem .5rem;
      border: 1px solid #333;
    }
    .table-wrap {
      overflow-y:auto;
    }

    table{
      border-collapse: collapse;
    }

    caption{
      padding: 0 0 0.3rem 2rem;
      font-size: 1.1rem;
      font-weight: bold;
      line-height: 1.3;
      text-align: left;
    }

    caption small{
      font-size: 0.9rem;
      font-weight: normal;
    }

    #col-01{
      width: 10rem;
    }

    th, td{
      padding: 0.3rem 1rem 0.2rem 1rem;
      text-align: center;
      border: 1px inset #AAA;                     /* Inset */
    }

    thead th{
      padding: 0.5rem 1rem 0.3rem 1rem;
      vertical-align: bottom;
      background-color: #FFC;
    }

    tbody th{
      font-weight: normal;
      text-align: left;
    }

    tbody td:nth-child(2){
      text-align: left;
    }

    tbody td:nth-child(3),
    tbody td:nth-child(4){
      text-align: right;
    }

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>

  <div id="wrapper">
  <div class="table-wrap">
    <table>
      <caption><small>Table 01:</small><br>U.S. Sales of Fuzzy Slippers for 2020</caption>
      <colgroup>
        <col id="col-01">
        <col id="col-02">
        <col id="col-03">
        <col id="col-04">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Description</th>
          <th scope="col">Price</th>
          <th scope="col">On Hand</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th scope="row">Mens Bathrobe</th>
          <td>Soft heavy-duty for Winter</td>
          <td>$39.99</td>
          <td>547</td>
        </tr>

        <tr>
          <th scope="row">Fuzzy Slipper</th>
          <td>Cozy, fluffy extra comfy slippers</td>
          <td>$19.99</td>
          <td>7</td>
        </tr>

        <tr>
          <th scope="row">Sweat Pants</th>
          <td>Great for lounging around at home</td>
          <td>$24.99</td>
          <td>852</td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>

</body>
</html>

UpstateLeafPeeper · January 3, 2021, 1:11am

I looked at the sample from PaulO, but didn’t see what was going on… (It’s hard to understand what is happening in the nexted window in that lin.)

What does your “table wrapper” do?

And what does this code do?

    .table-wrap {
      overflow-y:auto;
    }

My latest version seems to behave well at all resolutions except it scrolls right a tad on an iPhone 5 which I think is 325px wide.

system · April 4, 2021, 8:11am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.