如何让这个 table 响应？

Question

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

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

<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

<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 2

将此行添加到您的 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 3

我通常不使用 <table>、<tr> 和 <td> 标签，而是使用 <div> 标签和类并定义这些标签作为 CSS 中的 table 个组件，如

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

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

使用 table 属性的其他优点是

能够将内容水平居中和垂直居中，
它们在给定宽度上自动分布的可能性同时考虑到他们的内容
为所有 "columns" 实现相同的垂直高度，包括他们的背景，而不需要任何其他方法。

如何让这个 table 响应？

How do I make this table responsive?

html

css

jquery

media-queries