我有一张桌子，我正在努力使其具有响应能力。当我从右向左调整大小时，它完美收缩在小窗口中，我点击刷新并尝试将其大小调整回来这就是我现在为 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，结果相同。
4 回答
沧海一幻觉
TA贡献1824条经验 获得超5个赞
我建议您使用 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
TA贡献1878条经验 获得超4个赞
当您重新加载并且处于最小窗口大小时，第二个、第四个、第五个、第六个、第七个、第八个和第九个子级将设置为显示：无。
当您扩大备份大小时，不会重置其中任何一个以实际显示。
因此，您需要在较大的媒体尺寸中执行一些操作，将它们设置为在您返回时显示。
以下是一些关于如何确保元素在较大尺寸下可见的想法。
请阅读评论，尤其是关于孩子 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;
}
}
有只小跳蛙
TA贡献1824条经验 获得超8个赞
为什么您如此依赖于td:nth-child(x)影响代码的可重用性，请使其：即使移动列，也不必触及 css。
我建议创建实用程序类并将这些类添加到您的表列中。
例如：
.hidden-mobile
@media (max-width: 450px) {
display: none;
}
等等。如果您的 HTML/Table 不可访问，那么不幸的是您必须通过使用 querySelector 的脚本来访问它，这会影响您的可重用性。
添加回答
举报
0/150
提交
取消