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

from flask import Flask
from flask import request
from flask import redirect

class Server(Flask):
    def __init__(self, *args, **kwargs):
        super(Server, self).__init__(*args, **kwargs)
        self.messages = []

server = Server(__name__)

@server.route('/')
def form():
    return "messages: " + server.messages

@server.route("/input_message")
def input_message():
    return '<form action="/store_message" method="GET"><input name="input1"><input type="submit" value="enter message"></form>'

@server.route("/store_message")
def store_message(): 
    server.messages.append(request.args.get('input1', ''))
    return redirect("http://127.0.0.1:5000", code = 302)

if __name__ == "__main__":
    server.run(
        host = "127.0.0.1",
        port = "5000"
    )

<强> CSS

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

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，如

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

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

使用表属性的其他优点是

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

如何使此表格快速响应？

3 个答案: