Tables: Column w/Auto width disappears on mobile-need min. width

HTML & CSS
21

Yes you would just set height:auto in a suitable media query.

If you want it based on width of the viewport then do something like this (adjust width to suit).

e.g.

@media screen and (min-width:1000px){
 .table-wrapper{
  height:auto;
  max-height:none;
 }
}

Or maybe you could base it on height of the viewport if you wanted.


@media screen and (min-height:800px){
 .table-wrapper{
  height:auto;
  max-height:none;
 }
}

Or a mixture of both but that makes things a little complex and simpler is usually better.

22

This works great, but since I need different table heights for multiple resolutions it becomes blocky:

 .table-wrapper{
  height:250px;
  max-height:100vh;
  overflow:auto;
 }
@media screen and (min-height:350px){
 .table-wrapper{
  height:600px;
  max-height:100vh;
  overflow:auto;
 }
}
@media screen and (min-height:750px){
 .table-wrapper{
  height:auto;
  max-height:none;
 }
}

Isn’t there a way to dynamically set the height and max-height instead of to AUTO but to a value relative to the actually window resolution? (needs to be able to be adjusted, like if window height is 500, then window height-50, reaching 450)

*of course biggest size resolution’s code will remain aswell (@media screen and (min-height:750px){height:auto; max-height:none;})

23

Yes that’s what max-height:100vh does. It is 100% of the Viewport Height (vh). You’d just set the actual height property to auto or nothing at all as that’s the default.

Now you are getting into magic number territory and that tells me you are micro managing too much and will end up down a never ending rabbit hole.:slight_smile:

However to answer your question yes you can offset the max-height using the css calc property.

e.g.

max-height:calc(100vh - 100px);

However the 100px is a magic number because it relates to something that you can’t be sure is always going to be 100px (or whatever value you need). For example your fixed header on small screen is around 68px tall but on a large screen its about 160px tall. bearing in mind that if I increase or decrease my browser text size that may change.

In most cases it is better to design a system that doesn’t rely on something else not changing.

This is the dilemma of design. :slight_smile:

That’s why I’m inclined to do things like this instead.

24

very well explained thank you so much, from your explanation it seemed to me that tying the table’s height to the VH variable would achieve what I need, and it does for tables bigger than this height number, but having tables with less height than 80vh creates a blank space below the table as if the table had the needed height, is there a way to remove that blank space?

something like, if height:80vh>height:auto, then height:auto.

25

This is how it’s setup atm, notice the bottom white spacer since the table’s too small to fit in:

 .table-wrapper{
  height:75vh;
  max-height:100vh;
  overflow:auto;
 }
@media screen and (min-height:750px){
 .table-wrapper{
  height:82vh;
  max-height:100%;
  overflow:auto;
 }
}
1 Like
26

That’s won’t work because all you get is the smallest of those. All you get is 75vh. You will never get 100vh. The units must be different between max-height and height otherwise there is no choice. You just get a fixed height at whatever is the smallest.

There is also a problem here because 100% does not work for elements not based on an unbroken chain of elements back to root all which have a height defined (apart from grid and flex cases),

All that rule will give you is height:82vh.

I gave you what you wanted with max-height. Stop putting heights on things :slight_smile:

If you say max-height:100vh then the element will be as tall as its content unless its content is taller than the viewport and then the content will be viewport height and scroll. Height should remain at auto at all times.

There’s no point in putting a height on a table if the table is less than that height.

The code I gave you allows the table to grow as required but if it ever gets to viewport height (or the calc version) then a scrollbar appears to allow the table to scroll without getting any taller.

e.g.

max-height:calc(100vh - 100px);

The height should be height:auto.

Get rid of all your heights and just use max-height.

As an aside also do not repeat unchanged properties in your media queries. The original rule still applies so don’t duplicate a rule unless you are modifying it. :slight_smile:

1 Like
31

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