表结构更改为响应式？答案

【问题标题】：Table structure change To Responsive?表结构更改为响应式？
【发布时间】：2015-06-19 21:33:29
【问题描述】：

我使用过类似这个表格视图的代码，如何改变它的 div 标签样式？我想改变响应式的表结构？我将如何改变任何想法？我可以在表格标签内使用样式吗？我已经厌倦了 div 标签但它不起作用？任何想法如何改变这个结构完全响应？？

<TABLE BORDER="1" id="login" CELLPADDING="4" CELLSPACING="0">
 <TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>Organization ID:</TD>

        <TD><INPUT TYPE="TEXT" NAME="org_id"></TD>

      </TR> 
<TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>UserName:</TD>

        <TD><INPUT TYPE="TEXT" NAME="uname"></TD>

      </TR>

      <TR>

        <TD ALIGN="RIGHT"><FONT FACE="VERDANA" SIZE="2"><B>Password:</TD>

        <TD><INPUT TYPE="password" NAME="pwd"></TD>

      </TR>

      <TR>

        <TD COLSPAN="2" ALIGN="RIGHT"><INPUT TYPE="IMAGE" SRC="images/login.png" BORDER="0"></TD>

      </TR>

    </TABLE>

    </FORM>

【问题讨论】：

你能把这个添加到 jsfiddle 中，这样我们可以更好地提供帮助。
我在jsfiddle中添加了jsfiddle.net/pqp1pbcn

标签： jquery css html responsive-design

【解决方案1】：

以百分比设置表格宽度

table{
  width:100%;
  }

【讨论】：

【解决方案2】：

试试这个<TABLE BORDER="1" id="login" CELLPADDING="4" CELLSPACING="0" width="100%">

【讨论】：

【解决方案3】：

您可以同时编写 html 标签（表格登录和 Div 样式登录），隐藏 div 登录并使用媒体查询显示它并在显示较小尺寸时隐藏表格。

类似这样的：

<!doctype html>
<head>
<style>
    .div-login{
        display: none;
    }
    .table-login{
        display: block;
    }
     @media only screen and (max-width: 480px){
        .div-login{
            display: block;
        }
        .table-login{
            display: none;
        }
    }
</style>
</head>
<body>

 <div class='table-login'>
    <form action='destination.php' method='post'>
        <strong> write your table-styled form here </strong>
        <!-- <table> </table> -->
    </form>
 </div>
 <div class='div-login'>
    <form action='destination.php' method='post'>
        <strong> write your div-styled form here </strong>
        <!-- <div> </div> -->
    </form>
 </div>

</body>
</html>

【讨论】：