我如何将我的表格/页面变成响应式表格/页面？ [复制]答案

【问题标题】：How would I make my table/page into a responsive one? [duplicate]我如何将我的表格/页面变成响应式表格/页面？ [复制]
【发布时间】：2016-04-23 02:19:12
【问题描述】：

正如标题所暗示的，我想让我的表格变成响应式表格，以便它可以在移动设备或桌面上自动调整。这是我的代码：

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，但我想我可能做错了哈哈。任何帮助将不胜感激谢谢！

【问题讨论】：

在我的 codepen 收藏中查看这个 codepen codepen.io/chriseppstein/pen/bprmt
非常感谢菲特！你是救生员！！！
Lotusms 你的代码集也很好用，谢谢！ :)

标签： css responsive-design

【解决方案1】：

您需要使用“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>

【讨论】：