jquery - 如何使此表响应？

Question

这是一个带有内联样式的表格。它不是响应式的理想选择，所以我需要找到另一种制作表格的方法。我希望它在全尺寸屏幕(大约 1140 像素及以上)时看起来像这样。它不需要是一张 table ，我对任何事情都持开放态度。也许带有媒体查询的 DIV 是最好的。

这是一个登录页面，当它缩小时，我希望按钮和图像放大并占用更多空间。当尺寸缩小时，按钮和图像必须彼此重叠，我明白这一点。希望在全尺寸布局时保持与此处相似的布局:

<table style="width:100%;height:80%;margin-top:10px">
        <tbody><tr>

    <td style="padding-top:10px;text-align:right;" >
        <button style="border-radius:15px; font-size:22px;color:#e7e7e7;width:150px;height:50px;background-color:orange;box-shadow: 0 0 3px 3px #CCC;" class="btn-help" onclick="gotoHelp()">Help <img src="img/help6.png" style=""> </button>
    </td>

            <td style="text-align:center">
                <img title="PIV/CAC Login" src="img/piv-image.jpg" style=" cursor:pointer;background-repeat:no-repeat;background-size:contain;font-weight:bold;font-size:20px;width:180px" onclick="window.location.assign(&#39;tabbed.jsp&#39;)">
            </td>
        <td style="padding-top:10px;text-align:left">
            <button type="button" style="border-radius:15px; font-size:22px;color:#e7e7e7; width:150px;height:50px;  box-shadow: 0 0 3px 3px #CCC;" class="btn btn-success" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> Login <img src="img/login4.png" style=""></button>
    </td>

    </tr>


    </tbody></table>

https://jsfiddle.net/Lance_Bitner/b3qxu3c3/

Answer 1

将此行添加到您的 CSS 中

table { 
  width: 100%; 
  border-collapse: collapse; 
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table, thead, tbody, th, td, tr { 
        display: block; 
        text-align: center !important;
    }
}