Table inside responsive div element (causes overlapping on resizing window)

Question

I am new to front end programming. I have made the back-end of an application as an R Shiny app and I am trying to make a layout for this information which requires presentation of tabular data, in HTML and CSS.

I am using the Tachyons CSS library as I hoped it would make designing the layout much easier.

I am using their code template example 'Three Columns - Collapse to Single' at the bottom of this page of their documentation: here . This works wonderfully BUT when I put a table in the div suddenly the div elements overlap upon page re-size.

To explain this better I have the following screenshots and a link to two codepens with the code.

Please not that for some reason the visual output on codepen looks different than on my browser (see below) so might need to be run locally, but HTML and CSS code is there to help identify the problem).

Screenshots of when the divs only contain a number (not a table): codepen

<body>
  <!-- first row of blocks -->
<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">1</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">2</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">3+4</div>
    </div>
  </div>
</div>

  <!-- second row of blocks -->
 <div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">5</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">6</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">7+8</div>
    </div>
  </div>
</div>
 </div>
 </body>

just contains text - browser window is wide enough that they are full size
- Just contains text - browser window made narrower so that the boxes squash together
- boxes collapse into a single column when browser window gets very narrow

Screenshots of when there is a table in the div: codepen

  <body>
  <!-- first row of blocks -->
<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">
         <table class="table-custom" style="width:100%">
            <tr>
              <th>Name</th>
              <th>Date</th> 
              <th>Score</th>
              <th>Average</th>
              <th>Total</th>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
        </table>
      </div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">2</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">3+4</div>
    </div>
  </div>
</div>

  <!-- second row of blocks -->
 <div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">5</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">6</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">7+8</div>
    </div>
  </div>
</div>
 </div>
 </body>

When there is a table in the first div when the browser window is large (which works fine)
However when the window size is made smaller there is now an overlap between the boxes

How can I prevent this overlap from happening? I am using firefox 57.0 (64 bit) when generating the screenshots.

I have been wrestling with this problem over the past 2 days and any help would be much appreciated.

Thanks

It seems like it simply overflowing, you'll need to wrap the table in a div with something like `overflow: auto;` to create a scrollbar when the table data is to big to fit in the grid cell... table columns do not wrap to a new line. — zgood, Nov 22 '17 at 21:45

tao · Accepted Answer · 2017-11-22T22:14:52.363

1

Just place a .table-holder on the column you want to keep from overflowing and declare the following rule:

.table-holder {
  overflow-x:auto;
}

This will make your column horizontally scrollable when the width of its content will exceed its own width. I'm assuming this is what you want, although I realize you only specified what the problem is, not how you'd like it dealt with. If that's not what you want, you should probably clarify.

In case it's not obvious, you can use any class name you want, table-holder is only the name I'd give it, as I like to be able to figure out what things do even if I return in a project after a long, long time, not remembering anything I did there.

edited Nov 22 '17 at 22:14

answered Nov 22 '17 at 22:09

tao

82,996
16
114
150

Yes, this fixed it. Thanks so much! – 0mm3 Nov 23 '17 at 18:47
As you are already using Tachyons, you could use `.overflow-x-auto` so you wouldn't need to create a new class. – Matias Kinnunen Jan 18 '18 at 07:47
1

@martias: let's suppose I learned Bootstrap v2 classes really well 5 years ago. What use would that be now? Knowing and understanding the CSS properties behind the classes of a particular library is much more valuable and useful in the long run than knowing the classes. I answer most CSS questions with this in mind: libraries have the tendency to come and go; CSS properties have the tendency to stay. – tao Jan 18 '18 at 08:28
My comment was actually meant more for @0mm3 but yeah, I agree with what you are saying. – Matias Kinnunen Jan 18 '18 at 08:47
Note OP gets notified about comments on answers only if you mention them using @. But they do get notified about any comment on their question, without needing mentioning. You're limited to one mention/comment. – tao Jan 18 '18 at 09:22

Table inside responsive div element (causes overlapping on resizing window)

1 Answers1