根据屏幕尺寸调整 html 表格宽度

Question

我希望表格能够在较小的屏幕（例如 17 英寸或更小）上填充 100% 的空间，但在 19 英寸上仅填充约 90%，在 22 英寸上填充 80%，在 24 英寸或更大屏幕上填充约 60% 。这些不必是精确的。我只想知道如何做到这一点的基础知识。我知道调整浏览器大小会对大屏幕有所帮助，但这超出了我的控制范围，因为我不会成为最终用户。我在 24 英寸屏幕上进行开发，但表单将用于各种尺寸。我可以使用 CSS、Javascript 或任何技术。

请不要对桌子争论。我必须使用它们。

Answer 1

正如上面提到的，CSS 媒体查询就是为了这个目的而进行的。您应该考虑的一件事是使用以像素为单位的分辨率，而不是以英寸为单位的物理宽度。看看这个例子：

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>

您可以在MDN上阅读有关媒体查询的更多信息。