@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>
最佳答案
您可以这样做并且只使用一个表,因为它们将具有相同的内容。
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>
关于html - @media 适用于 CSS。有没有 html 的东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31459330/