How to have a table be a set (px) width for screen sizes above, say 1000px, but then scale down with further window size decrease?

Question

<table id="example" class="row-border compact" style="width:1000px; table-layout:fixed;">

A table is set to width:1000px and like it to be width:1000px for screens 1000px or larger, but when the window size scales smaller I'd like the table to act as if, width:90%.

Is this possible with just the style description?

score 0 · Accepted Answer · answered May 19 '20 at 22:17

What you're describing sounds like a media query. Unfortunately, these aren't possible using just the inline style attribute on your <table>.

This answer explains it:

@media rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations.

You could consider:

Declaring the media queries in the <head> of your document.
An external stylesheet

How to have a table be a set (px) width for screen sizes above, say 1000px, but then scale down with further window size decrease?

1 Answers1