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.

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.

• javascript
• html
• css
• html-table

• 2 Have you looked into media-query's? – creativename Commented May 13, 2017 at 14:09
• can you use bootstrap tables..its responsive. – zabusa Commented May 13, 2017 at 14:09
• @creativename No I haven't. I'm​ doing this for a friend who thinks that since I'm an EE I know everything. I'll look into that. Thanks. – Adan Commented May 13, 2017 at 14:11
• @sabareesh I guess I could use bootstrap. But the responsive part sounds exactly like what I'm trying not to do. – Adan Commented May 13, 2017 at 14:13

2 Answers 2

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.

Try using responsive data tables if you have to use tables.

https://css-tricks./responsive-data-tables/