Is it possible to do this with table td?

Asked

Viewed 70 times

1

Okay let’s see:

//PHONE
<table>
    <tr>
        <td>COL 1</td>
        <td>COL 2</td>
    </tr>
    <tr>
        <td>COL 1</td>
        <td>COL 2</td>
    </tr>
</table>

//TABLET E MAIORES
@media only screen and (max-width : 768px) { table>tr>td {...} }
@media only screen and (max-width : 1024px) { table>tr>td {...} }
<table>
    <tr>
        <td>COL 1</td>
        <td>COL 2</td>            
        <td>COL 3</td>
    </tr>
    <tr>
        <td>COL 1</td>
    </tr>
</table>

Is it possible to do this? When on the mobile a tr with two td, on tablets they start to have a tr with 3 td after with 4 and so on...

javascript html css table media-queries

2 answers

2

You can use the nth-child to hide the columns. It would be something like this:

@media only screen and (max-width: 768px) {
    table td:nth-child(n+3) {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    table td:nth-child(n+4) {
        display: none;
    }
}

Example: http://jsfiddle.net/x6rckfsp/

0

@media cannot change the HTML encoding, only the style of each HTML element.

Interesting would be you use div with percentages.

  • I agree you can’t change HTML but you can hide/show right?

  • Right, but hiding/showing won’t solve your problem. Right would be Ivs with percentages for each device/screen size.

  • Yes true, but with table{ width: 100%;} seems to work well: http://jsfiddle.net/x6rckfsp/1/

  • So. Because of his doubt, it would be normal: width:50% and with the media query would be with width: 33%. The doubt is to position the columns, and not hide them.

Browser other questions tagged javascript html css table media-queries

You are not signed in. Login or sign up in order to post.