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

但我想要大于 600px:

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

响应式网格方法:

正如 Isherwood 在他的评论中所说:

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

这可能最好在没有表格的情况下完成。

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>