如何使此表响应？

Question

这是一个内联样式的表格。它不适合响应式，所以我需要找到另一种方法来制作表格。当屏幕为全尺寸时，我希望它看起来像这样，大约 1140 像素及以上。它不需要是一张桌子，我对任何事情都持开放态度。也许带有媒体查询的 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;
    }
}

Answer 2

<div class="table_main">
<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>
</div>

CSS

.table_main{
  width:100%;
  overflow:auto;
}
.table_main table{
  width:100%;
}

Answer 3

我通常不使用<table>、<tr> 和<td> 标签，而是将<div> 标签与类一起使用，并将它们定义为CSS 中的表格组件，例如

.my_container {
  display: table;
}
.my_rows {
  display: table-row;
}
.my_cells {
  display: table-cell;
}

这有很多优点，其中之一是能够在媒体查询中使用完全不同的display 参数以用于较小的屏幕。例如，我可以通过在媒体查询中使用display: block 简单地将所有以前的表格单元格（垂直）放置在一个小型智能手机屏幕上，而不是水平放置。

使用表属性的其他优点是

• 将内容水平居中和垂直居中的能力，

• 它们在给定宽度上自动分布的可能性 同时考虑到他们的内容

• 无需任何其他方法即可为所有“列”（包括其背景）实现相同的垂直高度。