Is it possible to do this with table td?

Question

Is it possible to do this with table td?

Navigation

#1 by (2 votes)
#2 by (0 votes)

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 you're on the phone a tr with two td, tablets begin to have a tr with 3 td then with 4 and so on ...

javascript html css table media-queries

asked by anonymous 02.08.2016 / 05:06

2 answers

Entity Framework Model and Domain Class Form within an html Form

score 2 · Answer 1

You can use nth-child to hide the columns. It would look 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: link

score 0 · Answer 2

0

@media can not change HTML coding, just the style of each HTML element.

Interesting would be to use div with percentages.

02.08.2016 / 05:16