CSS Width and Max-Width Combined

How to combine a min-width with a max-width that equals to 100% if needed in CSS?

Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

CSS width and max-width combined

Add

display: block;

to the table element's style attribute (preferably in a CSS file or the <style> section of the document rather than as in inline style).

<div> elements have display: block by default, while <table> elements have display: table; by default. Your problem is that the max-width property only applies to block elements, so you have to apply display: block; to the table.

Combination of width, min-width and max-width

I think you need media queries. You can set the width for different viewports.

#head {    background-color:#00FF00;}body {    text-align:center;}#container{    margin: 0 auto;    width:100%;    max-width:500px;    text-align:center;}#left {    background-color:#FF0000;    float: left;    width: 50%;    min-width: 150px;    max-width: 100%;}#right {    background-color:#0000FF;    float: left;    width: 50%;    min-width: 150px;    max-width: 100%;}
@media (max-width: 500px) {    #left { width: 100%;}    #right { width: 100%;}}

<html>    <head>    </head>    <body>        <div id="head">            foo        </div>        <div id="container">            <div id="left">                bar            </div>            <div id="right">                baz            </div>        </div>    </body></html>

CSS How do I ask for both max-height and max-width?

If I understand you correclty, what you want to do is ask for both max-height and max-width in the same query string sentence. If that is the case you just need to create this css block:

@media screen and (min-height: 720px) and (min-width: 1920px) {
   /* CSS rules here*/
}

Let me know if that is what you needed.

If you want to ask for one OR the other just just replace and for a comma.

Combining min-width and max-width

Take one of the set out of media queries.

#div1 {  display: none;}#div2 {  display: block;}@media screen and (max-width: 800px) {  #div1 {    display: block;  }  #div2 {    display: none;  }}

<div id="div1">  DIV1</div><div id="div2">  DIV2</div>

How to combine min-width and max-width in one media query

You can combine two media queries in one, like this:

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
    display: none !important;
}
}

EDIT This will hide .show-sm-only on screen smaller than (max-width) 544px and on screen bigger than (min-width) 767px.