0

table tdウィンドウのサイズを変更したり、画面サイズが小さい場合は、一部を非表示にします。CSSを試しましたmedia queries 

th:nth-last-child(-n+7) {display:none}
td:nth-last-child(-n+7) {display:none}
th:last-child {display:none}
td:last-child {display:none}

それは機能しますが、CSSはtdをカウントできないため、テーブルに3つしかない場合はtd、上記のコードで3つすべてを非表示にしますtd。jQueryを使用してこれを達成するのを手伝ってください：サイズ変更時に非表示td または画面サイズが小さい、

  1. 画面幅が768pxの場合、6つだけtdを表示し、右側から他を非表示にします

  2. 画面幅が480pxの場合、4つだけtdを表示し、右側から他を非表示にします

  3. 画面幅が320pxの場合、3つだけtdを表示し、右側から他を非表示にします

4

1 に答える 1

1

:last-child代わりにmax-widthメディアクエリを使用してください。

td:nth-child(n+7)行の7番目のセルで始まるセルにtd:nth-child(n+5)のみ影響し、行の5番目のセルで始まるセルにのみ影響します。

@media (max-width:768px) {
    td:nth-child(n+7),th:nth-child(n+7) {display:none}
}
@media (max-width:480px) {
    td:nth-child(n+5),th:nth-child(n+5) {display:none}
}
@media (max-width:320px) {
    td:nth-child(n+4),th:nth-child(n+4) {display:none}
}

http://jsfiddle.net/mblase75/GsxPK/

于 2012-10-09T14:39:56.027 に答える