當您重新加載并且處于最小窗口大小時，第二個、第四個、第五個、第六個、第七個、第八個和第九個子級將設置為顯示：無。
當您擴大備份大小時，不會重置其中任何一個以實際顯示。
因此，您需要在較大的媒體尺寸中執行一些操作，將它們設置為在您返回時顯示。
以下是一些關于如何確保元素在較大尺寸下可見的想法。
請閱讀評論，尤其是關于孩子 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;
}
}
