@media在CSS上工作。 是否有適用於html的內容？

Question

@media在html文件的css部分中起作用。 但是，如果屏幕寬度小於600像素，我想要居中的<table>帶有一列；如果寬度大於600像素，我想要具有2列。

完全相同的內容將在表中，但排列方式不同。 表格中的元素（選擇框）在兩種布局中都具有相同的ID。

有什么辦法嗎？

所以我希望在600px或更小范圍內：

<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>

但是我想要大於600像素：

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

Answer 1

您可以執行類似的操作，並且僅使用一個表，因為它們將具有相同的內容。

 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> 

響應式網格方法：

正如伊舍伍德在評論中所說：

在我看來，無論如何這里的桌子都是錯誤的方法。 表用於具有行/列關系的數據。 這顯然不是，OP應該使用響應網格。 –伊瑟伍德

如果沒有表，最好這樣做。

 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>