如何在调整窗口大小时使表格响应？
我有一张桌子，我正在努力使其具有响应能力。
当我从右向左调整大小时，它完美收缩
在小窗口中，我点击刷新并尝试将其大小调整回来
这就是我现在为 CSS 所做的
@media only screen and (max-width: 1555px) {
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
}
@media only screen and (max-width: 1080px) {
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
}
@media only screen and (max-width: 840px) {
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
}
注意：我已经在所有浏览器类型上尝试过此操作：Chrome、Firefox、Safari，结果相同。
郎朗坤浏览 142回答 4
4回答
-
沧海一幻觉
我建议您使用 display: table-cell启用所有表格数据 ( td) 和表格标题 ( )。th@media (min-width: 1300px) and (max-width: 1555px) {th, td { display: table-cell;} th { color:brown;}td:nth-child(9),th:nth-child(9) { display: none;}td:nth-child(8),th:nth-child(8) { display: none;}}@media (min-width: 1200px) and (max-width: 1300px) {th, td { display: table-cell;}th { color:brown;}td:nth-child(9),th:nth-child(9) { display: none;}td:nth-child(8),th:nth-child(8) { display: none;}td:nth-child(7),th:nth-child(7) { display: none;}}@media (min-width: 840px) and (max-width: 1200px) { th, td { display: table-cell;} th { color:red; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; }}@media (min-width: 520px) and (max-width: 840px) { th, td { display: table-cell;} th { color:orange; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; } td:nth-child(5),th:nth-child(5) { display: none; }}@media (max-width: 520px) { th, td { display: table-cell; } th { color:yellow; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(5),th:nth-child(5) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; } td:nth-child(2),th:nth-child(2) { display: none; } }table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: #dddddd;}@media (min-width: 520px) and (max-width: 840px) { th, td { display: table-cell;} th { color:orange; } td:nth-child(3),th:nth-child(3) { display: none; }}@media (max-width: 520px) { th, td { display: table-cell; } th { color:yellow; } td:nth-child(2),th:nth-child(2) { display: none; } td:nth-child(3),th:nth-child(3) { display: none; } }<h2>HTML Table</h2><table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr></table> -
UYOU
当您重新加载并且处于最小窗口大小时，第二个、第四个、第五个、第六个、第七个、第八个和第九个子级将设置为显示：无。当您扩大备份大小时，不会重置其中任何一个以实际显示。因此，您需要在较大的媒体尺寸中执行一些操作，将它们设置为在您返回时显示。以下是一些关于如何确保元素在较大尺寸下可见的想法。请阅读评论，尤其是关于孩子 3 的评论 - 它总是可见吗？我已经放置了 display: block 来显示子元素，但我无法知道这是否是元素中正常的设置。请替换为适合您的特定用例的任何内容。/* DONT FORGET WE NEED TO COPE WITH A WIDE SCREEN SO I'VE ADDED THIS */ td:nth-child,th:nth-child { display: block; } /* we need to make sure that child 7 comes back into view */@media (min-width: 1300px) and (max-width: 1555px) { th { color:brown; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: block; }}/* at this, the 4th smallest, we need to make sure that child 6 comes back into view */@media (min-width: 1200px) and (max-width: 1300px) { th { color:brown; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: block; }}/* at this 3rd from smallest we need to make sure that child 5 comes back into view */@media (min-width: 840px) and (max-width: 1200px) { th { color:red; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; } td:nth-child(5),th:nth-child(5) { display: block; }}/* at the next to smallest the 4, 5, 6, 7 8, 9 children are display: none so we need to make sure that child 2 (and see comment below about child 3) is/are displayed */@media (min-width: 520px) and (max-width: 840px) { th { color:orange; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; } td:nth-child(5),th:nth-child(5) { display: none; } td:nth-child(2),th:nth-child(2) { display: block; } td:nth-child(3),th:nth-child(3) { /* just to be on the safe side */ display: block; } td:nth-child(2),th:nth-child(2) { display: block; }}/* when very small the 2, 4, 5, 6, 7, 8, 9 children are display: none. DID YOU MEAN TO KEEP CHILD 2 DISPLAYED? */@media (max-width: 520px) { th { color:yellow; } td:nth-child(9),th:nth-child(9) { display: none; } td:nth-child(8),th:nth-child(8) { display: none; } td:nth-child(7),th:nth-child(7) { display: none; } td:nth-child(6),th:nth-child(6) { display: none; } td:nth-child(5),th:nth-child(5) { display: none; } td:nth-child(4),th:nth-child(4) { display: none; } td:nth-child(2),th:nth-child(2) { display: none; }} -
饮歌长啸
对于那些喜欢库的人，我可以说我强烈推荐 DataTable Library。将 CSS 、动态调整大小等问题留给库。 -
有只小跳蛙
为什么您如此依赖于td:nth-child(x)影响代码的可重用性，请使其：即使移动列，也不必触及 css。我建议创建实用程序类并将这些类添加到您的表列中。例如：.hidden-mobile @media (max-width: 450px) { display: none;}等等。如果您的 HTML/Table 不可访问，那么不幸的是您必须通过使用 querySelector 的脚本来访问它，这会影响您的可重用性。
随时随地看视频慕课网APP
相关分类
JavaScript