css - How to remove a html table particular column to make other datas visible(responsive) using media queries?

Question

I have a table I want to make it look good in mobile view. What I thought is I can remove the unwanted data so that remaining data will be visible in mobile devices.

So I decided to give display:none; to unwanted column which is first in this case. I have a problem in doing this. When I give display:none to particular column data I get the empty space for the upper column because it doesn't have class to give display:none;

I cannot edit the source of markup, so is there a way to remove the column for mobile devices using media queries alone? That is CSS alone?

If possible, how to do it?

HTML

<table border="1">
    <tr>
        <th>
        </th>
          <th>
              head1
        </th>
          <th>
              head2
        </th>
    </tr>
    <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
        <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
           <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
</table>

CSS

@media (max-width:480px) {
.un{
    display:none;
}
}

JSFIDDLE

NOTE: Resize the output window less than 480px to see the effect.

Answer 1

CSS only solution:

http://jsfiddle.net/2YEzP/1/

I recommend you use another class/ID in front of the proposed selectors below, like this: .class123 table tr th:nth-child(1)

or: table.class45 tr th:nth-child(1)

Otherwise you could break other tables on the site!

@media (max-width:480px) {
table tr th:nth-child(1),
.un{
    display:none;
}
}

The :nth-child() selector is supported in all major browsers, except IE8 and earlier.

jQuery solution:

It combines the CSS solution and adds jQuery to add support for older browsers. I recommend just that one!

http://jsfiddle.net/aykXG/1/

$( document ).ready(function() {
    $( "table tr th:nth-child(1)" ).addClass( "un" );
});

Same note as above: I recommend you use another class/ID in front of the proposed selectors below, like this: .class123 table tr th:nth-child(1)

or: table.class45 tr th:nth-child(1)

This should be a unique selector and will make sure you won't affect another table/cells...

(The solutions keep the HTML unchanged, as requested.)