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