@media在CSS上工作。 是否有适用于html的内容？

Question

The @media works in the css section of an html file. However, I want a centered < table > with one column if the screen is below 600px wide or with 2 columns if it is greater than 600px.

The exact same stuff will be in the table but arranged differently. Elements in the table (select boxes) will have the same id in both layouts.

Is there any way of doing this?

So in 600px or less I want:

<table>
    <tr>
        <td>Stuff 1</td>
    </tr>
    <tr>
        <td>Stuff 2</td>
    </tr>
    <tr>
        <td>Stuff 3</td>
    </tr>
    <tr>
        <td>Stuff 4</td>
    </tr>
</table>

But in greater than 600px I want:

<table>
    <tr>
        <td>Stuff 1</td>
        <td>Stuff 2</td>
    </tr>
    <tr>
        <td>Stuff 3</td>
        <td>Stuff 4</td>
    </tr>
</table>

Answer 1

You can do something like this and only use a single table since they will have the same content.

 table, tr, td { display:block; } @media only screen and (min-width: 600px){ table { display:table; } tr { display:table-row; } td { display:table-cell; } } 

 <table> <tr> <td>Stuff 1</td> <td>Stuff 2</td> </tr> <tr> <td>Stuff 3</td> <td>Stuff 4</td> </tr> </table> 

Responsive grid approach:

As Isherwood stated in his comment:

Seems to me like a table is the wrong approach here anyway. Tables are for data that have a row/column relationship. This apparently doesn't, and the OP should be using a responsive grid instead. – isherwood

This is probably best done without tables.

 div {box-sizing:border-box; width:100%;} @media only screen and (min-width:600px) { .half { float: left; margin: 0; width: 50%; } .row:after { content:""; display:table; clear:both; } } 

 <div class="container"> <div class="row"> <div class="half">Stuff 1</div> <div class="half">Stuff 2</div> </div> <div class="row"> <div class="half">Stuff 3</div> <div class="half">Stuff 4</div> </div> </div>