Resize html table width based on screen size

Question

I would like a table to fill 100% of the space on smaller screens, like 17" or less, but only about 90% on a 19", 80% on a 22", and about 60% on a 24" or bigger screen. These don't have to be exact. I just want to know the basics of how to do it. I know resizing the browser would help on big screens, but that is beyond my control, as I won't be the ultimate user. I develop on 24" screens, but the forms will be used on a variety of sizes. I could use CSS, Javascript, or any technique.

Please don't argue against tables. I have to use them.

Answer 1

As it was mentioned above, CSS media queries are made for this purpose. One thing you should consider is to work with the resolution in pixels, not the physical width in inches. Have a look on this example:

table, th, td {
border: 1px solid Black;}

/* make the table a 100% wide by default */
table {
width: 100%;}

/* if the browser window is at least 800px-s wide: */
@media screen and (min-width: 800px) {
  table {
  width: 90%;}
}

/* if the browser window is at least 1000px-s wide: */
@media screen and (min-width: 1000px) {
  table {
  width: 80%;}
}

/* and so on... */

<table>
  <tr>
    <th>Header1</th>
    <th>Header2</th>
  </tr>
  <tr>
    <td>Content1</td>
    <td>Content2</td>
  </tr>
</table>

You can read more about media queries on MDN.