<分区>
<分区>
如标题所示，我想将我的表格变成响应式表格，以便它可以在移动设备或桌面上自动调整。这是我的代码:
article, aside, figure, footer, header,
menu, nav, section { display: block; }
body {
font-size: 1em;
}
h2 {
font-size: 100%;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 100%;
font-weight: bold;
color: red;
text-align: center;
}
td {
min-width: 150px;
width: 150px;
text-align: center;
border: 2px solid #ccc;
vertical-align: top;
}
th {
border: 2px solid #cccccc;
}<table>
<thead>
<tr>
<th>User ID</th>
<th>Website</th>
<th>Time</th>
<th>Data Usage</th>
<th>Total Data Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2><span style="cursor:pointer">Luke</span></h2></td>
<td><p>Facebook</p><p>Youtube</p></td>
<td><p>10.00am</p><p>1.30pm</p></td>
<td><p>3mb</p><p>1gb</p></td>
<td><h3>1.3gb</h3></td>
</tr>
<tr>
<td><h2><span style="cursor:pointer">John</span></h2></td>
<td><p>Facebook</p><p>Youtube</p></td>
<td><p>10.00am</p><p>1.30pm</p></td>
<td><p>3mb</p><p>1gb</p></td>
<td><h3>1.3gb</h3></td>
</tr>
<tr>
<td><h2><span style="cursor:pointer">Peter</span></h2></td>
<td><p>Facebook</p><p>Youtube</p></td>
<td><p>10.00am</p><p>1.30pm</p></td>
<td><p>3mb</p><p>1gb</p></td>
<td><h3>1.3gb</h3></td>
</tr>
</tbody>
</table>我试过使用 JQuery，但我想我可能做错了哈哈。任何帮助将不胜感激谢谢!
最佳答案
您需要使用“vw”或“vh”(基本上是您的观看宽度和观看高度的 1%)作为比例而不是像素。目前大多数网络浏览器都支持它，因此兼容性应该不会太担心。
例如:
#test {
width:25vw;
height:25vh;
position:absolute;
top:25vw;
left:25vh;
background-color:rgba(127,127,127,0.5);
}
和
<div id="test"></div>
关于css - 我如何将我的表格/页面变成响应式表格/页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34845793/