How to remove a html table particular column to ma

问题:

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.

回答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.)

回答2:

Trying using

CSS

@media (max-width:480px) {
.un{
   visibility:hidden;
}
}

http://jsfiddle.net/LVzjP/

回答3:

Try adding the .un class to the corresponding th element:

<th class="un">
</th>

http://jsfiddle.net/h9LN7/3/

edit

Since you're unable to edit the markup, you could try something with :nth-child() like so:

tr th:nth-child(1), tr td:nth-child(1){
    display: none;
}

With the above solution, the entire first column will be set to display none without even needing an .un class

回答4:

You have gotten what you asked for, and this demo only shows the effects of nth-child. Since you can't edit the markup the way is to use nth-child, I have used it for a while now and just loving it.

With nth-child and jquery you can set class-name so you or later person can keep a better eye on the elements

$('table tr td:first-child').attr('class', 'un');

This sets class name 'un' every first td columns in your table markup.

Or if you want to go for the css way, and wasnt to sure if you wanted to remove the head or not, so i keept it like this:

http://jsfiddle.net/Yb67s/1/