How to CSS style a table such that its width is within [min, max] percent of page width and as wide as necessary?

Question

How to CSS style a table such that

1. its width is at the most 80% of page width, and,

2. is at the least 50% of the page width, and

3. is as wide as necessary?

Answer 1

I think you want both min-width and max-width:

<style type="text/css">
table
{
  min-width: 50%;
  max-width: 80%;
}
</style>

This will make the table at least 50% the width of its container. It will grow (if it needs) to a maximum of 80% width of the page.

Answer 2

Use min-width and max-width

min-width: 50%;
max-width: 80%;