Question

@media适用于html文件的css部分。但是，我想要一个居中的＆lt;表＆gt;如果屏幕宽度低于600px，则使用一列;如果大于600px，则使用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

你可以这样做，只使用一个表，因为它们具有相同的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

响应式网格方法：

正如伊舍伍德在评论中所说：

无论如何，我觉得像桌子一样是错误的方法。表用于具有行/列关系的数据。这显然不是，OP应该使用响应式网格。 - isherwood

这可能是最好的，没有表格。

＆＃13;

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

＆＃13;

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

＆＃13;

@media在css上工作。有什么东西的HTML？

1 个答案: