Question

I want to hide some table td when I resize window or screen size is small.
I tried 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}

It works but CSS cannot count td, so if a table has only three td then above code hide all three td.
Please help me achieve this using jQuery :
hide td on resize or screen size is small,

1. if screen width is 768px then show only six td and hide other from
   right side

2. if screen width is 480px then show only four tdand hide other from
   right side

3. if screen width is 320px then show only three tdand hide other
   from right side

Answer 1

Use :last-child and max-width media queries instead.

td:nth-child(n+7) will only affect cells starting with the seventh cell in a row, td:nth-child(n+5) will only affect cells starting with the fifth cell in a row, and so on.

@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/