Question

我想在一个较小的屏幕上填充100％的空间，比如17＆＃34;或更少，但只有大约90％的19＆＃34; 80％的22＆＃34;和大约60％的24＆＃34;或更大的屏幕。这些不必是准确的。我只想知道如何做的基础知识。我知道调整浏览器大小会对大屏幕有所帮助，但这是我无法控制的，因为我不会成为最终用户。我在24＆＃34;屏幕，但表格将用于各种尺寸。我可以使用CSS，Javascript或任何技术。

请不要反对表格。我必须使用它们。

Answer 1

如果必须使用表，请尝试使用响应数据表。

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

Answer 2

如上所述，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上阅读有关媒体查询的更多信息。

根据屏幕大小调整html表格宽度

2 个答案: