<table align="center" border="0" border-collapse:="" cellpadding="5" cellspacing="5" collapse="" style="height: auto; width: 1229px; max-width: 100%;">
我想知道如何使我的表重新调整自己,所以当我调整浏览器窗口或移动终端上的表相应地调整自己。
nsc4cvqm1#
您想要使用的是媒体查询,它允许您根据屏幕/设备的大小选择内容在屏幕上的位置和方式。看看这些以供进一步参考:https://www.w3schools.com/css/css3_mediaqueries.asphttps://www.w3schools.com/css/css_rwd_mediaqueries.asp
8aqjt8rx2#
如果可能的话,您可以考虑使用CSS网格作为创建响应表的一种方式https://developer.mozilla.org/en-US/docs/Web/CSS/grid
oewdyzsn3#
如果你的数据最好显示在一个表中,那么你就会知道你有多少列,并且会对它们之间的相对宽度有所了解。您还将决定在一个非常窄的设备上发生什么-是将单元格全部压缩到一次可以看到整行,还是用户在单元格中水平滚动,如果事情不适合可用屏幕?为了解决这个问题,您可能需要为表本身或其容器设置一个最小宽度。一旦完成,你就可以使用CSS相对于表格的整体宽度来设置每个单元格的样式。在最简单的情况下,如果你想让它们的宽度都相同,你可以给予它们每个容器宽度的x%,其中x* 列数= 100。否则,您可以使用CSS选择器,如td:nth-child(1){width:10%;} td:nth-child(2){width:15%;}等等。单元格高度也是如此-您可能希望根据行号的不同而有所不同。就这样继续下去,但是使用CSS而不是不受欢迎的特定于表的属性,你有很大的灵活性,例如哪些行和列获得什么填充或颜色或边框以及它们的基本尺寸。如果保留所有维度(除了最大和最小表宽),则可能不需要使用媒体查询。
mzsu5hc04#
在我的例子中,我给了你一个自适应table的例子。自适应射击在800px宽度。希望对你有帮助。
table
table { border-collapse: collapse; border-spacing: 0; width: 100%; overflow: hidden; } thead { background-color: #E5E5E5; } tr:nth-child(even) { background-color: #F2F2F2; } th, td { padding: 15px; text-align: center; } @media(max-width: 800px) { table { border: 0; } thead { display: none; } tr { display: block; margin: 0 0 20px 0; } td { display: block; text-align: right; } td:before { content: attr(aria-label); float: left; font-weight: bold; } td:last-child { border-bottom: 0; } tr:nth-child(odd) { background-color: #F2F2F2; } tr:nth-child(even) { background-color: #FFFFFF; border-width: 3px 0 3px 0; border-style: solid; border-color: #E5E5E5; } }
<table> <thead> <tr> <th scope="col">filed 1</th> <th scope="col">filed 2</th> <th scope="col">filed 3</th> <th scope="col">filed 4</th> <th scope="col">filed 5</th> </tr> </thead> <tbody> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> </tbody> </table>
4条答案
按热度按时间nsc4cvqm1#
您想要使用的是媒体查询,它允许您根据屏幕/设备的大小选择内容在屏幕上的位置和方式。
看看这些以供进一步参考:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
8aqjt8rx2#
如果可能的话,您可以考虑使用CSS网格作为创建响应表的一种方式
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
oewdyzsn3#
如果你的数据最好显示在一个表中,那么你就会知道你有多少列,并且会对它们之间的相对宽度有所了解。您还将决定在一个非常窄的设备上发生什么-是将单元格全部压缩到一次可以看到整行,还是用户在单元格中水平滚动,如果事情不适合可用屏幕?为了解决这个问题,您可能需要为表本身或其容器设置一个最小宽度。
一旦完成,你就可以使用CSS相对于表格的整体宽度来设置每个单元格的样式。在最简单的情况下,如果你想让它们的宽度都相同,你可以给予它们每个容器宽度的x%,其中x* 列数= 100。
否则,您可以使用CSS选择器,如td:nth-child(1){width:10%;} td:nth-child(2){width:15%;}等等。
单元格高度也是如此-您可能希望根据行号的不同而有所不同。
就这样继续下去,但是使用CSS而不是不受欢迎的特定于表的属性,你有很大的灵活性,例如哪些行和列获得什么填充或颜色或边框以及它们的基本尺寸。
如果保留所有维度(除了最大和最小表宽),则可能不需要使用媒体查询。
mzsu5hc04#
在我的例子中,我给了你一个自适应
table
的例子。自适应射击在800px宽度。希望对你有帮助。